loader优化 & vendor分包

[Narutocc]

loader添加cache-loader，添加缓存

npm i cache-loader -D

webpack.base.conf.js

module: {
  rules: [
    {
      test: /\.js$/,
      use: ['cache-loader', 'babel-loader'],
      include: [resolve('src')],
      exclude: resolve('node_modules')
    }
  ]
}

use里面有loader跟options时，如下写法 use: ['cache-loader', { loader: 'babel-loader', options: { ... } }]

注：url-loader不要加cache-loader，会导致图片加载出问题。

路径处理

resolve: {
  extensions: ['.js', '.vue', '.json'],
  // 添加路径
  modules: [
    resolve('src'),
    resolve('node_modules')
  ]
}

vendor文件过大的时候，可以直接把大的插件进行分包处理

webpack.prod.conf.js

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor_lib1',
  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: 'vendor_lib2',
  minChunks: function (module, count) {
    // any required modules inside node_modules are extracted to vendor
    return /xlsx|quill/.test(module.context)
  }
}),

webpack会自动做处理分包打包，把单个过大的文件进行拆减。