webpack常用基本配置的释义

webpack常用基本配置的释义

/**
 * 配置详解
 * https://webpack.docschina.org/configuration/optimization/
 * entry：入口起点
 *    写法1：string ---> entry: './src/js/index.js'
 *            单入口
 *            打包形成一个chunk，输出一个bundle文件
 *            如果不指定输出名称默认是main.js(如果指定了output.filename: 'XXX.js'则为指定的名称)
 *            输出：build/main.js
 *    写法二：array ---> entry: ['./src/js/index.js', './src/index.html']
 *            多入口
 *            所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件。
 *            作用：在HMR中让html文件热更新生效
 *            输出：build/built.js
 *    写法三：object { index: './src/js/index.js', add: './src/js/add.js'}
 *            多入口
 *            有几个入口文件就形成几个chunk，输出几个bundle文件
 *            此时的chunk名称是key
 *            输出：build/index.js和build/add.js两个js文件
 *    特殊用法：dll时打包同一类行的node_module文件
 *            {
 *              所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件
 *              index: ['./src/js/index.js', './src/js/print.js'],
 *              形成一个chunk。输出一个bundle文件
 *              add: './src/js/add.js'
 *            }
 *            输出：build/index.js（其中包含两个js文件index.js和print.js）和build/add.js两个js文件
 */
/**
 * 配置详解
 * output：输出
 *
 */
const TerserPlugin = require('terser-webpack-plugin');
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    //  输出文件名称（指定名称+目录）
    filename: 'js/[name].js',
    // 输出的文件目录（将来所有资源输出的公共目录）
    path: resolve(__dirname, 'build'),
    // 所有资源引入公共路劲的前缀 --> 'imgs/a.jpg' 加了这个配置之后会变成 '/imgs/a.jpg'
    // 'imgs/a.jpg'表示当前路径下直接找imgs  '/imgs/a.jpg'表示会以当前的服务器地址去补充去服务器根目录下找imgs
    publicPath: '/',
    chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称（在文件内部引入的包）
    // library: '[name]', // 整个库向外暴露的变量名  打包完是 var main = XXXXXXX
    // libraryTarget: 'window' // 变量名添加到哪个上 适用browser  打包完是 window['main'] = XXXXX
    // libraryTarget: 'global' // 变量名添加到哪个上 适用node
    libraryTarget: 'commonjs',
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理css的loader
        test: /\.css$/,
        // 多个loader需要用use
        use: ['style-loader', 'css-loader'],
      },
      {
        // 处理js的loader
        test: /\.js$/,
        // 需要排除的文件目录
        exclude: /node_modules/,
        // 只检查src下的js文件
        include: resolve(__dirname, 'src'),
        // 优先执行
        enforce: 'pre',
        // 延后执行
        // enforce: 'post',
        // 单个loader使用字符串
        loader: 'eslint-loader',
        options: {},
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
    }),
  ],
  mode: 'development',
  // 解析模块的规则
  resolve: {
    // 配置解析模块路劲别名：优点可以简写路劲 缺点是没有路径提示
    // 可以配置多个
    alias: {
      $css: resolve(__dirname, 'src/css'),
    },
    // 配置省略文件路径的后缀名 由左往右配置 可能会存在重名 所以css不建议省略
    extensions: ['.js', '.json', '.css', '.jsx'],
    // 告诉webpack解析模块是去哪个目录下面找node_modules
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules'],
  },
  // 是开发服务器开发环境使用的不可以用于生产环境
  devServer: {
    // 运行的代码的目录
    contentBase: resolve(__dirname, 'build'),
    // 监视contentBase目录下的所有文件，一旦文件变化就会reload
    watchContentBase: true,
    // 监视文件的配置
    watchOptions: {
      // 忽略文件
      ignored: /node_modules/,
    },
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 5000,
    // 域名
    host: 'localhost',
    // 自动打开浏览器
    open: true,
    // 不要显示启动服务器日志信息
    clintLogLevel: 'none',
    // 除了一些基本启动信息之外，其他内容都不要显示
    quiet: true,
    // 出现出错信息不要全屏提示
    overlay: false,
    // 服务器代理： 解决开发环境下的跨域问题
    proxy: {
      // 一旦devServer（5000端口）服务器接收到/api/XX的请求，
      // 就会把请求转发到另外一个服务器（3000）
      // 浏览器和服务器之前存在跨越问题，同名策略；
      // 服务器与服务器之间没有跨域问题。
      '/api': {
        target: 'http://localhost:3000',
        // 发送请求时 将请求路劲重写：将/api/XX 转换为/XX（去掉/api）
        pathRewrite: { '^/api': '' },
      },
    },
  },
  optimization: {
    // https://webpack.docschina.org/plugins/split-chunks-plugin/#splitchunkscachegroups
    splitChunks: {
      chunks: 'all',
      minSize: 30 * 1024, // 分割的chunk最小为30kb
      maxSize: 0, // 最大没有限制
      // 通过确保拆分后剩余的最小 chunk
      // 体积超过限制来避免大小为零的模块。
      //  'development' 模式 中默认为 0。对于其他情况，
      // splitChunks.minRemainingSize 默认为 splitChunks.minSize
      // 的值，因此除需要深度控制的极少数情况外，不需要手动指定它
      minRemainingSize: 0, // webpack5
      automaticNameDelimiter: '~', // 名称连接符
      minChunks: 1, // 要提取的chunk最少被引用一次
      maxAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量
      maxInitialRequests: 30, // 入口js文件最大并行请求数量
      // 强制执行拆分的体积阈值和其他限制（minRemainingSize，
      // maxAsyncRequests，maxInitialRequests）将被忽略。
      enforceSizeThreshold: 50000, // webpack 5
      // 拆分 chunk 的名称。设为 false 将保持 chunk 的相同名称，
      // 因此不会不必要地更改名称。这是生产环境下构建的建议值。
      // 如果 splitChunks.name 与 entry point 名称匹配，entry point 将被删除
      name: true, // 可以使用命名规则
      // 缓存组可以继承和/或覆盖来自 splitChunks.* 的任何选项。
      // 但是 test、priority 和 reuseExistingChunk 只能在缓存组级别上进行配置。将它们设置为 false以禁用任何默认缓存组
      cacheGroups: { // 分割chunk的组
        // node_modules文件会被打包到vendors组的chunk中 ---> vendors~XXX.JS
        // 需要满足上面的公共规则，如大小超过30kb，至少被引用一次
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          // 优先级
          priority: -10,
          // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
          reuseExistingChunk: true,
        },
        default: {
          // 需要提取的chunks最少要被引用两次
          // 这个规则会覆盖上面的那个minChunks配置
          minChunks: 2,
          // 优先级
          priority: -20,
          // 如果当前要打包的模块和之前已经被打包过的模块是同一个，就会复用 就不会重新打包
          reuseExistingChunk: true,
        },
      },
    },
    minimizer: [
      new TerserPlugin({
        // 开启缓存
        cache: true,
        // 开启多进程打包
        parallel: true,
        // 启动source-map
        sourceMap: true,
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        },
      }),
    ],
    // 将当前模块记录的其他模块的hash单独打包为一个文件runtime
    // 修改a文件时如果b文件内引用了a文件，重新打包a的contenthash值变化从而导致b文件的缓存失效这个设置可以解决这个问题
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
  },
};

 根据尚硅谷视频学习的地址尚硅谷最新版Webpack5实战教程(从入门到精通)_哔哩哔哩_bilibili

视频主要讲的是webpack4版本 跟着学习的时候我自己用的是webpack5的版本，运行报错的时候自己可以去查文档，有的配置会有变化

文档地址https://webpack.docschina.org/configuration/optimization/