webpack react 使用dll 打包以后react重复引用导致bundle过大

Question

使用webpack dll打包功能的依赖包，并且把react放入dll打包的模块中。

当打包完成以后app.bundle.js中还是包含了react的源代码。请问改如何处理?

webpack.dll.js

module.exports = {

  entry: {

    polyfill: ['babel-polyfill', 'whatwg-fetch', 'es6-promise'],

    common: ['history', 'md5', 'object-path', 'lokijs', 'object-assign', 'classnames'],

    react: ['react', 'react-dom'],

    reactRedux: ['react-redux', 'redux', 'redux-observable'],

    reactRouter: ['react-router-dom', 'react-router-redux']

  },

  output: {

    path: path.join(__dirname, buildDir),

    filename: '[name].dll.js',

    library: '[name]_[hash]'

  },

  context: path.resolve(__dirname),

  mode: NODE_ENV,

  devtool: 'source-map',

  plugins: [

    new CleanWebpackPlugin([buildDir]),

    new webpack.DefinePlugin({

      'process.env.NODE_ENV': JSON.stringify(NODE_ENV)

    }),

    new webpack.DllPlugin({

      path: path.join(__dirname, buildDir, '[name].manifest.json'),

      name: '[name]_[hash]',

      context: __dirname

    })

  ]

};

Answer 1

为什么不使用create-react-app脚手架来打包

Answer 2

用了dll打包，就不要用CommonsChunkPlugin打包react了