缩小文件搜索范围

webpack如何解析文件

webpack启动后会从entry入口开始，解析导入的语句然后再进行递归的解析；

导入语句时：

• 根据导入语句去寻找对应的导入文件
• 根据找到的导入文件的后缀，使用配置中的loader去处理文件

优化loader配置

由于loader对文件转化操作很耗时，所以需要让尽可能少的文件被loader处理

优化module.noParse配置

让webpack忽略对部分没采用模块化的文件的递归处理，提升构建的性能

优化resolve.alias配置

通过别名将原有的导入路径映射成一个新的导入路径

优化resolve.extensions配置

当导入文件没带后缀时，webpack会自动为文件加上后缀再去尝试询问文件是否存在

• 频率出现高的文件写在前面
• 没有的文件后缀不用添加
• 代码中加上文件的后缀

优化resolve.modules配置

配置webpack去哪些目录下找第三方模块

resolve.modules 的默认值是 ['node_modules']，含义是先去当前目录下的 ./node_modules 目录下去找想找的模块，如果没找到就去上一级目录 ../node_modules 中找，再没有就去 ../../node_modules 中找，以此类推，这和 Node.js 的模块寻找机制很相似

优化resolve.mainFields配置

配置第三方模块使用哪个入口文件

resolve.mainFields 的默认值和当前的 target 配置有关系，对应关系如下：

• 当 target 为 web 或者 webworker 时，值是 ["browser", "module", "main"]
• 当 target 为其它情况时，值是 ["module", "main"]

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$\/,
        // 使用cacheDirectory对转出的js文件缓存
        use: ['babel-loader?cacheDirectory'],
    		// 只对 src 目录下的文件使用babel-loader
        include: path.resolve(__dirname, 'src')
      }
    ],
  	noParse: [/react\.min\.js$/]
  },
  resolve: {
    // 使用 alias 把导入 react 的语句换成直接使用单独完整的 react.min.js 文件，
    // 减少耗时的递归解析操作
    alias: {
      'react': path.resolve(__dirname, './node_modules/react/dist/react.min.js')
      // 'react': path.resolve(__dirname, './node_modules/react/umd/react.production.min.js'), // react16
    },
    //优先寻找文件
    extensions: ['.js','.json'],
    // 指定第三方模块的路径，减少搜索步骤
    modules: [path.resolve(__dirname, 'node_modules')],
    //只采用main作为入口文件描述字段，减少搜索步骤
    mainFields: ['main']
  }
}

optimization: {
	splitChunks: {
		cacheGroups: {
			  monaco: {
          name: 'monaco',
          test: /[\\/]node_modules[\\/]monaco-editor[\\/]/,
          priority: 12,
          reuseExistingChunk: true,
        },
		}
	}
}


// 此插件允许覆盖webpack打包时的查找规则
webpack.ContextReplacementPlugin
	new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|zh-hk|en/)

// 复用其他chunk内已拥有的模块 当chunks引用了已经存在的被抽离的chunks时不会新创建一个chunk而是复用chunk
reuseExistingChunk: true,