Question

我在React工作，想要发布我的代码。我正在使用webpack创建bundle，因为我希望将bundle分为三个部分，也就是说，我的代码应该分成三个不同的文件，这样不仅一个文件被填充得太多了。我浏览了webpack和其他在线网站的官方文档，但仍未找到解决方案。

Answer 1

以下是一个完整的配置webpack.config.js，您可以将其作为基础。

const webpack = require('webpack');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;

const WebpackConfig = {
  // multiple component entry points
  entry: {
    AppPart1: './src/AppPart1',
    AppPart2: './src/AppPart2',
    AppPart3: './src/AppPart3'
  },

  // generate files
  output: {
    path: './assets',
    // creates JS files like "AppPart1.js"
    filename: '[name].js'
  },

  module: {
    preLoaders: [
       // add any pre-loaders here, OPTIONAL
    ],
    loaders: [
       // add any loaders here, like for ES6+ transpiling, React JSX etc
    ]
  },

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

  plugins: [
    // this will factor out some common code into `bundle.js`
    new CommonsChunkPlugin('bundle.js'),
  ]
};

module.exports = WebpackConfig;

在webpack版本结束时，您将在assets文件夹中找到以下内容

AppPart1.js
AppPart2.js
AppPart3.js
bundle.js

bundle.js将包含一些共享代码，并且必须包含在您的所有网页上以及该页面的相应部分文件中。

Answer 2

如果你有三个单独的文件，你可以在webpack配置上放置多个入口点：

entry: {
        "bundle1":"./src/app/somefile1.jsx",
        "bundle2":"./src/app/somefile2.jsx,
        "bundle3":"./src/app/somefile2.jsx"
}

对单个输入文件包的多个输出文件进行反应

2 个答案: