webpack 优化代码 让代码加载速度更快

一，如何优化webpack构建

（1），缩小文件搜索范围，

• 优化Loader配置

   module.exports = {
        module: {
            rules:  [
               {
                   test:/\.js$/,
                   use:['babel-loader?cacheDirectory'],
                   include: path.resolve(__dirname,'src')
  
               },
  
           ]
       }
   }

  我们可以适当的调整项目的目录结构，方便在配置Loader时候通过include缩小命中范围。

• 优化resolve.modules的配置
  resolve.modules的默认值是node_modules，如果没有就去上一层文件去寻找，以此类推，
  当安装的第三方模块放在根目录./node_modules的时候，就没必要按照默认方式去找，减少寻找配置如下：

  module.exports = {
  resolve:{
  modules: [path.resolve(__dirname, 'node_modules')]
  }
  }

• 优化resolve.mainFields配置
  我们安装的第三方的模块都会有pack.json文件，resolve.mainFields用来配置入口文件。
  当target为web时或者webworker，其默认值为['browser','main','module']
  当target为其他情况时：其默认值为['main','module']
  为了减少搜索步骤，由于是第三方模块都采用main字段去描述入口文件，所以如下配置：

   module.exports = {
   resolve:{
   mainFields: ['main']
   }
   }

未完待续。。。。。。。。。。。。