Question

我有以下文件结构：

src
  ...
  ListBox
    index.js
    ListBox.jsx
    ListBoxItem.jsx
  ...
  index.js

，其中

的src /列表框/ ListBox.jsx

class ListBox extends React.Component {
  ...
}

export default ListBox

的src /列表框/ ListBoxItem.jsx

class ListBoxItem extends React.Component {
  ...
}

export default ListBoxItem

的src /列表框/ index.js

export { default as ListBox } from './ListBox'
export { default as ListBoxItem } from './ListBoxItem'

的src / index.js

import ... from '...'
import { ListBox, ListBoxItem } from './ListBox'

export {
  ...
  ListBox,
  ListBoxItem
}

我使用webpack作为捆绑包，这是一个错误

正如您所看到的，webpack正试图在src / ListBox / index.jsx中找到ListBox模块而不是src / ListBox / ListBox.jsx。如果我将export { default as ListBox } from './ListBox'更改为export { default as ListBox } from './ListBox.jsx'则可行。它与ListBoxItem相同。

这是我的webpack.config.js

module.exports = (env) => {
const config = {
    devServer: {
        contentBase: path.join(__dirname, 'docs'),
        historyApiFallback: true,
        hot: true
    },
    devtool: env.development ? 'cheap-module-eval-source-map' : false,
    entry: {
        bundle: [
            'babel-polyfill',
            './docs/index.jsx'
        ]
    },
    output: {
        path: path.join(__dirname, 'docs'),
        filename: '[name].min.js'
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules')
                ],
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: env.production,
                            sourceMap: env.development
                        }
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                autoprefixer({
                                    browsers: ['last 2 versions']
                                })
                            ],
                            sourceMap: env.development ? 'inline' : false
                        }
                    }, {
                        loader: 'less-loader',
                        options: {
                            sourceMap: env.development,
                            sourceMapContents: env.development
                        }
                    }
                ]
            },
            {
                test: /\.(?:jsx?)$/,
                use: 'babel-loader',
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                    /.*example\.jsx$/
                ]
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: (module) => {
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),
        new HtmlWebpackPlugin({
            template: 'docs/index.html'
        }),
    ],
    resolve: {
        alias: {
            ui: path.resolve(__dirname, './src')
        },
        extensions: ['.js', '.jsx']
    }
};

return config

};

Answer 1

如果仔细查看错误消息，您可以在调用它ListBox\index.jsx时读取该网络包期望ListBox\index.js。您可以通过重命名文件来修复它，也可以调整webpack配置以使其接受.js，您可以通过调整resolve指令来实现。

resolve: {... extensions: ['.js','.jsx'] }

ES6导入/导出模块

1 个答案: