webpack_提取公共代码_多文件入口打包

webpack配置信息

entry: {
    Home:'./src/index',    //文件入口１
    Footer:'./src/_index'　//文件入口２
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',　　　　//打包生成之后的名字
    chunkFileName: '[name].js',　　//打包生成之后的名字
    publicPath: './dist/'               //代码生成在和webpack平级的dist目录下
  },
plugins: [
    .......
    new webpack.optimize.CommonsChunkPlugin({
      name:'common',　　　　　//提取公共代码文件名
      chunks:['Home','Footer'],　　//只提取main节点和index节点,不设置提取所有文件公共部分代码
      minChunks:2　　　//　最少被多少个文件公共才会被提取
    })
   ......
 ]

引用时应按照entry部分顺序引用js代码

上例中入口文件先有Home后有Footer,因此html引用顺序为

• common.js
• Home.js
• Footer.js

单独使用的时候引用

文件１：

• common.js
• Home.js

文件２：

• common.js
• Footer.js