Webpack

const HtmlWebpackPlugin = require(‘html-webpack-plugin’); const CopyWebpackPlugin = require(‘copy-webpack-plugin’); const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’); const CssMinimizerPlugin = require(‘css-minimizer-webpack-plugin’); const UglifyJSPlugin = require(‘uglifyjs-webpack-plugin’);

const FriendlyErrorsWebpackPlugin = require(‘friendly-errors-webpack-plugin’)

const notifier = require(‘node-notifier’)

// 打包速度分析 const SpeedMeasureWebpack5Plugin = require(‘speed-measure-webpack5-plugin’)

文件体积监控

const {BundleAnalyzerPlugin} require(‘webpack-bundle-analyzer’) 生成代码分析报告，可以直观的分析打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何等，针对这些我们可以进行文件分割等操作

编译时间优化减少要处理的文件

resolve: { extensions: [“.js”, “.jsx”], // 指定文件扩展名 alias: { “@”: resolve(__dirname, “./src”) // 指定查找别名 }, modules: [“node_modules”]， // 指定查找目录 mainField: [“browser”,”module”, “main”], // 从package.json中的哪个字段查找入口文件 mainFiles: [“index”], // 如果找不到mainFields的话，会找索引文件index.js } 缩小查找范围 1. extensions 指定extensions之后可以不用再require 或是import的时候加文件扩展名查找的时候会依次尝试添加扩展名进行匹配 ``` resolve: { extensions: [“.js”, “.jsx”, “.json”] }

```

2. alias 
配置别名可以加快webpack查找模块的速度
每当引入bootstrap模块的时候，它会直接引入bootstrap而不需要node_modules文件加中按模块的查找规则

3. modules

4. oneOf 
5. externals
6. resolveLoaders
7. noParse // 可以配置哪些模块文件的内容不需要进行解析
8. ignorePlugin // 用于忽略某些特定的模块，让webpack不把这些指定的模块打包进去
  requestRegExp, contextRegExp, moment
  在plugins中添加 
  ```
  new webpack.IgnorePlugin({
    resourceRegExp: /^\.\/local$/, // 资源正则
    contextRegExp: /moment$/  // 忽略文件夹
  })

  ```