webpack提高构建速度

1、费时分析
// webpack.dev.conf

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap(merge(baseWebpackConfig, {
   
    module: {
   
      rules: utils.styleLoaders({
    sourceMap: config.dev.cssSourceMap, usePostCSS: true })
    },
}

2、缩小范围
指定extension之后可以不用在require或是import的时候加文件拓展名，会依次阐释添加拓展名进行匹配

  resolve: {
   
    extensions: [".js", ".jsx", ".json", ".css"],
    alias: {
   
      bootstrap: bootstrap,
    },
    modules: [path.resolve(__dirname, "node_modules")],
  },

3.别名
alias 别名可以加快查找模块的速度

  resolve: {
   
    alias: {
   
      bootstrap: bootstrap,
    },
  },

4.modules

5.resolveLoader

resolve.resolveLoader用于配置解析loader时的resolve配置默认的配置
  resolveLoader: {
   
    modules: [path.resolve(__dirname, '../node_modules')],
    extensions: [".js", ".json"],
    mainFields: ["loader", "main"],
  },

6. IgnorePlugin
   忽略某些特定的模块，webpack不把这些指定的模块打包进去

plugins: [ 
    new webpack.IgnorePlugin(/^\.\/locale/, /moment$/),
  ],

第一个参数是匹配引入模块路径的正则表达式
第二个参数是匹配模块的对应上下文，即所在目录名

7、friendly-errors-webpack-plugin<