This website requires JavaScript.

webpack使用CommonsChunkPlugin拆包

2018.05.17 16:22字数 3291阅读 3975喜欢 0评论 0

webpack 配置

webpack.chunks.conf.js

var path = require('path')
var webpack = require('webpack')


function getModuleName(module) {
  var sign = 'node_modules';
  var signIndex = module.resource.indexOf(sign);
  var pathSeparator = module.resource.slice(signIndex - 1, signIndex);
  var modulePath = module.resource.substring(signIndex + sign.length + 1);
  var moduleName = modulePath.substring(0, modulePath.indexOf(pathSeparator) );
  moduleName = moduleName.toLowerCase();

  return moduleName
}

exports.chunksWebpackConfig = {
  plugins: [
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'axios',
      chunks: ['vendor'],
      minChunks: function (module, count) {
        return module.resource && ~['axios', 'qs', 'md5'].indexOf(getModuleName(module) ) && count >= 1
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vue',
      chunks: ['vendor'],
      minChunks: function (module, count) {
        return module.resource && ~['vue', 'vue-router'].indexOf(getModuleName(module) ) && count >= 1
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'element-ui',
      chunks: ['vendor'],
      minChunks: function (module, count) {
        return module.resource && ~['element-ui'].indexOf(getModuleName(module) ) && count >= 1
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'echarts',
      chunks: ['vendor'],
      minChunks: function (module, count) {
        return module.resource && ~['echarts', 'zrender'].indexOf(getModuleName(module) ) && count >= 1
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['echarts'],
      async: true,
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: Infinity,
    }),
  ],
}

// 手动排序 js chunk 的加载顺序
var chunks = ['manifest', 'axios', 'vue', 'vendor', 'element-ui', 'echarts', 'app'];

exports.htmlWebpackConfig = {
  chunks: chunks,
  chunksSortMode: function(a, b) {
    return chunks.indexOf(a.names[0]) - chunks.indexOf(b.names[0])
  },
}

webpack.dev.conf.js

......
var baseWebpackConfig = require('./webpack.base.conf')
var { chunksWebpackConfig } = require('./webpack.chunks.conf')

module.exports = merge(baseWebpackConfig, chunksWebpackConfig, {
  ......
})

// 公共模块,必须在项目代码之前引入加载。
// manifest必须最先加载,因为manifest中保存的是 js 代码的引导逻辑。在 html-webpack-plugin中手动排序。

var { htmlWebpackConfig } = require('./webpack.chunks.conf')

new HtmlWebpackPlugin(Object.assign({}, {
  filename: 'index.html',
  template: 'index.html',
  inject: true,
}, htmlWebpackConfig)),

来源:( https://www.jianshu.com/p/5a543a0284f6 )