1つの入力ファイルの束の複数の出力ファイルに反応する

Question

私はReactで働いていて、自分のコードを公開したいと思います。バンドルを3つの部分に分けたい、つまり、私のコードを3つの異なるファイルに分けて、1つのファイルだけが人口過多にならないようにしたいので、webpackを使ってバンドルを作成しています。私はwebpackやその他のオンラインサイトの公式ドキュメントを見に行きましたが、まだ解決策は見つかりませんでした。

Answer 1

次の3つの別々のファイルがある場合、あなたはあなたのWebPACKの設定に複数のエントリポイントを置くことができます：ここでは

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

Answer 2

は、あなたがあなたのものに基づかできる完全な構成webpack.config.jsです。 webpackビルドの終わりに

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; 

は、ここにあなたが assetsフォルダ

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

になりますものです0

bundle.jsには共有コードが含まれており、ページの適切なパーツファイルとともにすべてのページに含める必要があります。