的WebPack 2：拆分库，供应商和应用到不同的文件

想象我有一个丰富的应用程序，它使用了大量的第三方模块，包括lodash，时刻，爱可信，反应。的WebPack 2：拆分库，供应商和应用到不同的文件

如果我将所有内容捆绑在一个包中，则最终的大小应该高于1MB。

我想的WebPack收拾我的图书馆的路上，它存储：

lodash分别
时刻分别
所有其他node_modules供应商下存储捆绑
应用程序的代码存储在单独的文件

我试图以不同的方式玩CommonsChunkPlugin，但从未收到我想要的结果。

我准备的实例库来说明我的问题： https://github.com/PavelPolyakov/webpack-react-bundles

的WebPack入口部分（conf/webpack.base.config.js):

entry: { 
    lodash: 'lodash', 
    moment: 'moment', 
    app: [ 
     'react-hot-loader/patch', 
     'webpack-dev-server/client?http://localhost:3001', 
     'webpack/hot/only-dev-server', 
     './app/index.js'] 
}

这里是生产配置（conf/webpack.production.config.js），试图独立的模块：

plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify('production') 
      } 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: function (module) { 
       // this assumes your vendor imports exist in the node_modules directory 
       return module.context && 
        module.context.indexOf('node_modules') !== -1; 
      } 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      minimize: true, 
      compress: { 
       warnings: true 
      } 
     })]

这种情况下，时刻和lodash仍然会出现在vend或捆绑。我想要把它们放在两个单独的包中。

任何想法赞赏。

来源

2017-04-04 Pavel Polyakov

你有没有试过使用CommonsChunkPlugin的两个实例，一个用'name：“lodash”'，另一个用于'moment'？或者'name：[“lodash”，“webpack”]'，如[docs]（https://webpack.js.org/guides/code-splitting-libraries/）所示。 – opatut

是的，我试过了，这并没有帮助。或者我尝试了一种错误的方式。 –

如果从CDN中包含它们并使用external，它可能是最简单的。

这不是每个定义代码拆分，但可能接近你打算完成：减少包的大小。有些用户已经从另一个站点缓存CDN版本的优点。

来源

2017-04-04 18:26:14 opatut

这样做需要在脚本中使用它们作为全局变量。当然这是一个选项，但问题的范围需要使用代码分割。 –

最后我得到的帮助来自@sokra在github上的问题： https://github.com/webpack/webpack/issues/4638

对于那些谁将会面临同样的问题，这里是解决了问题描述的问题的完整的WebPack配置：

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

module.exports = { 
    entry: { 
     app: ['./app/index.js'] 
    }, 
    output: { 
     filename: '[name].bundle.js', 
     sourceMapFilename: '[name].bundle.map', 
     path: path.resolve(__dirname, './dist') 
    }, 
    devServer: { 
     port: 3001, 
     contentBase: path.resolve(__dirname, './dist'), 
     historyApiFallback: true 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.(js|jsx)$/, 
       exclude: /node_modules/, 
       use: [ 
        { 
         loader: 'babel-loader', 
         options: { 
          presets: [['es2015', { 'modules': false }], 'react'], 
          plugins: ['transform-async-to-generator', 
           'transform-decorators-legacy', 
           'transform-runtime', 
           'react-html-attrs', 
           'react-hot-loader/babel'], 
         } 
        } 
       ] 
      }, 
      { 
       test: /\.css/, 
       use: ['style-loader', 'css-loader', 'postcss-loader'] 
      }, 
      { 
       test: /\.(eot|svg|ttf|woff|woff2|gif|jpg|png)$/, 
       use: 'file-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './index.html', 
      inject: "body" 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      minimize: true, 
      compress: { 
       warnings: true 
      } 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: (m) => /node_modules/.test(m.context) 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'lodash', 
      minChunks: (m) => /node_modules\/(?:lodash|moment)/.test(m.context) 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'moment', 
      minChunks: (m) => /node_modules\/(?:moment)/.test(m.context) 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: "manifest", 
      minChunks: Infinity 
     }) 
    ], 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    devtool: 'source-map' 
}

感谢所有试图帮助的人！

来源

2017-04-08 07:58:36

的WebPack 2：拆分库，供应商和应用到不同的文件

回答

相关问题