webpack打包公共代码

注意，本文档基于webpack@3.1.0

webpack不会对单页面进行公共代码的打包，所以需要多entry

var webpack = require('webpack')
var path = require('path')
module.exports = {
  entry: {
    'pageA': './src/pageA',
    'pageB': './src/pageB'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks: 2   出现次数判断是否打包到common.js里面
    })
  ]
}

页面分析：

pageA.js
import './subPageA'
import './subPageB'
export default 'PageA'

pageB.js
import './subPageA'
import './subPageB'
export default 'PageB'

subpageA.js
import * as modulesA from './moduleA'
export default function Fun() {
  console.log('subpageA')
  modulesA('subpageA的输出')
}

subpageB.js
import * as modulesA from './moduleA'
export default function FunB() {
  console.log('subpageB')
  modulesA('subpageB的输出')
}

modulesA.js
export default function modules(data) {
  console.log(data)
}

通过查看打包后的pageA/B包的大小判定是否打包成功，打包成功后的pageA/B里面没有subpageA/B/modulesA的代码在里面

打包第三方和公共方法

var webpack = require('webpack')
var path = require('path')
module.exports = {
  entry: {
    'pageA': './src/pageA',
    'pageB': './src/pageB',
    'vendor': ['lodash']
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks: 2,
      chunks: ['pageA', 'pageB'] //这里需要自己写入口文件，因为判定了entry入口,否则报错
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['vendor','manifest'], //第三方的包，和webpack自己生成的文件
      minChunks: Infinity
    })
  ]
}