Webpack2は、私ははっきりとここ3回の反応梱包していますCommonsChunkPlugin

Question

この

[01] [00] WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance. 
[01] [00] Entrypoints: 
[01] [00] app (5.43 MB) 
[01] [00]  vendor1.bundle.js 
[01] [00]  vendor1.bundle.js.map 
[01] [00]  app.bundle.js 
[01] [00]  styles.css 
[01] [00]  app.bundle.js.map 
[01] [00]  styles.css.map 
[01] [00] 
[01] [00] vendor2 (2.37 MB) 
[01] [00]  vendor1.bundle.js 
[01] [00]  vendor1.bundle.js.map 
[01] [00]  vendor2.bundle.js 
[01] [00]  vendor2.bundle.js.map 
[01] [00] 
[01] [00] vendor1 (901 kB) 
[01] [00]  vendor1.bundle.js 
[01] [00]  vendor1.bundle.js.map 

このWebPACKの構成

let plugins =() => { 
    let basePLUGINS = [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      names: ['vendor1','vendor2'], 
      minChunks: Infinity 
     }), 
     new HtmlWebpackPlugin({ 
      chunks: ['app'], 
      body: true, 
      chunksSortMode: 'dependency', 
      env: { 
       Prod: args.options.prod 
      }, 
      template: 'src/index.ejs' 
     }), 
     new webpack.LoaderOptionsPlugin({ 
      options: { 
       sassLoader: { 
        includePaths: [path.resolve(__dirname, "./src/sass")] 
       }, 
       context: '/', 
       postcss: [ 
        require("postcss-cssnext")(
         { 
          browsers: '> 0%', 
          customProperties: true, 
          colorFunction: true, 
          customSelectors: true, 
         }) 
       ] 
      } 
     }), 


    ]; 
    if (args.options.prod) { 
     basePLUGINS.push(
      new ExtractTextPlugin({ 
       filename: "styles.css", 
       disable: false, 
       allChunks: true, 
       sourceMapFilename: '[file].map' 
      }), 
      new webpack.optimize.UglifyJsPlugin({ 
       compress: {warnings: false}, 
       output: {comments: false}, 
       sourceMap: true 
      }) 
     ); 
     return basePLUGINS 
    } 
    return basePLUGINS 

}; 

module.exports = { 
    entry: { 
     app: "./src/ts/app.tsx", 
     vendor2: ['react-dom'], 
     vendor1: ['react'] 
    }, 
    plugins: plugins(), 
    output: { 
     filename: "[name].bundle.js", 
     path: path.join(__dirname, "www") 
    }, 

を考慮した複数のバンドルから重複したコードを削除しますか？ CommonsChunkPluginはここで助けが必要です 私はベンダー2を作ることができますし、私のアプリケーションは自分のコードベースを変更せずに反応を含んでいませんか？ ランニングがwebpack2.beta28

Answer 1

はそれのようにすべての作品を検索します - 同様の設定のために：

var path = require("path"); 
var webpack = require("webpack"); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

let plugins =() => { 
    let basePLUGINS = [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      names: ['vendor1','vendor2'], 
      minChunks: Infinity 
     }) 
    ]; 
    return basePLUGINS 

}; 

module.exports = { 
    devtool: 'source-map', 
    cache: true, 
    entry: { 
     vendor1:['react'], 
     vendor2:['react-dom'], 
     app:'./app/main' 
    }, 
    output: { 
     filename: "dist/[name].js" 
    }, 
    module: { 
     rules: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel", 
      query: { 
       presets: [ "es2015", 'react'] 
      } 
     }] 
    }, 
    plugins : plugins() 
} 

Iましたこの：

Hash: 34e2caf91850d7be3386 
Version: webpack 2.1.0-beta.25 
Time: 4059ms 
       Asset  Size Chunks    Chunk Names 
     dist/app.js 16.7 kB  0 [emitted] app 
    dist/vendor1.js 334 bytes  1 [emitted] vendor1 
    dist/vendor2.js  728 kB  2 [emitted] vendor2 
    dist/app.js.map 9.78 kB  0 [emitted] app 
dist/vendor1.js.map 327 bytes  1 [emitted] vendor1 
dist/vendor2.js.map  867 kB  2 [emitted] vendor2 
[183] multi vendor1 28 bytes {1} [built] 
[184] multi vendor2 28 bytes {2} [built] 
    + 183 hidden modules 

コメントプラグインは：

Hash: 2b59b62aea13547150d2 
Version: webpack 2.1.0-beta.25 
Time: 4217ms 
       Asset Size Chunks    Chunk Names 
     dist/app.js 741 kB  0 [emitted] app 
    dist/vendor2.js 725 kB  1 [emitted] vendor2 
    dist/vendor1.js 138 kB  2 [emitted] vendor1 
    dist/app.js.map 874 kB  0 [emitted] app 
dist/vendor2.js.map 865 kB  1 [emitted] vendor2 
dist/vendor1.js.map 164 kB  2 [emitted] vendor1 
[183] multi vendor1 28 bytes {2} [built] 
[184] multi vendor2 28 bytes {1} [built] 
    + 183 hidden modules 

Answer 2

以下になりappとlibsのチャンクに共通するすべてのコンテンツを含むvendor.jsファイル。

new webpack.optimize.CommonsChunkPlugin({ 
    name: 'react+webpack-internals', 
    chunks: ['app', 'vendor1'], 
    filename: 'react.js' 
}), 
new webpack.optimize.CommonsChunkPlugin({ 
    name: 'react-dom', 
    chunks: ['app', 'vendor2'], 
    filename: 'react-dom.js' 
})