反應單個輸入文件包的多個輸出文件

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將包含一些共享代碼，並且必須包含在您的所有頁面上以及頁面的相應部分文件中。