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']
  }
  }

   

  
  
  

 

 

 

 

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