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

Question

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

Answer 1

如果你有三个单独的文件，你可以把你的WebPack配置多个入口点：

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

Answer 2

下面是一个完整的配置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

什么0

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