webpack多入口打包

本来是个单页面一个入口的web项目,webpack配置如下

module.exports = {
entry: {
    app:APP_FILE,
    common: [
        'react',
        'react-dom',
        'react-router',
        'redux',
        'react-redux',
        'redux-thunk',
        'immutable'
    ]
},
output: {
    // publicPath: './js', //编译好的文件,在服务器的路径,域名会自动添加到前面
    path: BUILD_PATH, //编译到当前目录
    filename: '[name].js', //编译后的文件名字
    chunkFilename: '[name].[chunkhash:5].min.js',
},
...
new webpack.optimize.CommonsChunkPlugin('common', 'common.bundle.js'),

然后上面让把注册拆出来,做成多入口的。题主想这很简单嘛,于是新建了
index.html;app.regist.js;router.register.js三个文件并把原先的路由进行了拆分,把原先路由中引入注册模块的内容都放在了新的路由里。
新的webpack配置如下

module.exports = {
entry: {
    app:path.join(__dirname, './app/main.js'),
    registerModule:path.join(__dirname, './app/main.register.js'),
    vendor: [
        'react',
        'react-dom',
        'react-router',
        'redux',
        'react-redux',
        'redux-thunk',
        'immutable'
    ]
},
output: {
    //publicPath: './js/', //编译好的文件,在服务器的路径,域名会自动添加到前面
    path: BUILD_PATH, //编译到当前目录
    filename: '[name].js', //编译后的文件名字
    chunkFilename: '[name].[chunkhash:5].min.js',
},
...
new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.bundle.js'
    }),
    

但运行打包命令后,发现vendor.bundle.js变大了,从原先的250k左右涨到了950k,点开看了下发现里面包含了业务代码。为什么会这样呢。

阅读 2.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进