Webpack：缩小构建目标，加速编译

[hubvue]

缩小构建范围

由于webpack是基于文件的构建，可以通过配置来缩小查找文件的范围加速编译。

loader的include和exclude

• include：指定哪些文件需要loader编译
• exclude：指定哪些文件忽略loader编译

在使用babel-loader的时候，通常使用exclude来忽略loader对node_module的编译。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/
      }]
   }
}

resolve缩小构建范围

resolve可以指定文件的后缀，减少搜索层级等等。

• resolve.modules：减少模块搜索层级
• resolve.mainFileds：指定第三方模块的入口文件
• resolve.extensions：指定模块的后缀名
• resolve.alias：使用短路径代替模块目录

module.exports = {
     resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@': './src/components'
    },
    modules: ['node_modules'],
    mainFileds: ['main']
  }
}