webpack5配置说明

webpack的命令行方式配置例子。格式通常是 --[要设置的属性] [要设置的key]=[要设置的值（如果该值没有则默认true）]

npx webpack --mode production --output-path='./dist' --output-filename='[name][hash].bundle.js'

设置环境变量命令，要使用环境变量，必须使用 module.exports = (env) => { retrun {} } 方式写配置文件

npx webpack --env goal=local --env production --progress

配置简单说明大全

module.exports = {
  // 控制打包环境，不同的环境webpack的默认处理方式也不同
  mode: 'development',
  // 打包入口，webpack构建读取的第1个文件
  // 简写 entry: './src/index.js', 
  entry : {
    // 入口文件
    index: './src/index.js' ,
    index2: {
      // 入口文件
      import: './src/index.js',
      // 与其他入口文件共享某一个名为“shared”的chunk
      dependOn: 'shared',
    },
    index3: {
      // 入口文件
      import: './src/another-module.js',
      // 与其他入口文件共享某一个名为“shared”的chunk
      dependOn: 'shared',
    },
    // 将第三方包声明为一个入口文件，方便其他入口文件的 dependOn
    shared: 'lodash',
  },
  // 此选项控制是否生成，以及如何生成 source map。
  devtool: 'inline-source-map',
  // 这里的选项决定了如何处理项目中的不同类型的模块。（webpack 将"模块"的概念应用于项目中的任何文件，可以简单理解成一个文件一个模块）
  module: { 
    // 指定每个模块使用的规则，更具体的loader配置，见该博文：https://www.codenong.com/j5f05ce835188252e7e2bc5ad/
    rules: [ 
      {
        // 对哪些文件使用该loader，通常使用正则
        test: /\.css$/i, 
        // 该loader应用的模块，主应用于少量代码时，可以加快构建速度
        include: path.resolve(__dirname, 'src'),
        // 使用什么 loader ，如果是数组的话有先后顺序，上一个loader的结果会传给下一个loader,执行顺序右到左,webpack最终需要的是javascript
        use: ['style-loader', 
          { 
            // 如果里面填的是对象 {}，则loader是必须得
            loader: 'css-loader',
            // options的内容由loader方提供
            options: {
              modules: true,
              // 每个额外的 loader/plugin 都有其启动时间。尽量少地使用工具。
              plugins: []
            },
          }
        ], 
        // webpack提供Rule.type控制模块的默认解析方式。像把.json读成json数据就是webpack的内置行为，可以通过这里修改
        type: 'asset/resource',
        // 为 loader 提供一些额外的配置，除了默认的值，不同的 loader 还可能有其他选项
        parser: { 
          // 如果一个模块源码大小小于 maxSize，那么模块会被作为一个 Base64 编码的字符串注入到包中， 否则模块文件会被生成到输出的目标目录中。
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
          // 如果 Rule.type 被设置成 'json'，那么 Rules.parser.parse 选择可能会是一个方法，该方法实现自定义的逻辑，
          // 以解析模块的源和并将它转换成 JavaScript 对象。 它可能在没有特定加载器的时候，
          // 对将 toml, yaml 和其它非 JSON 文件导入成导入非常有用。这里是一个函数，格式为 function(input) => string | object
          parse: () => {},
        }
      },
    ],
  },
  // webpack-dev-server 配置项。官网上有一些tip提示如何从路由里访问被打包的文件，可以看一下。
  // tip位置https://webpack.docschina.org/guides/development/#using-source-maps
  devServer: {
    // 告诉 dev-server 在服务器已经启动后打开浏览器。设置其为 true 以打开你的默认浏览器。
    open: true,
    // 服务监听的静态文件
    static: './dist'
  },
  // 插件选项
  plugins: [
    // 该插件会比较常用，在每次打包时会生成已引用输出文件的 index.html
    new HtmlWebpackPlugin({
      title: '管理输出',
    }),
  ],
  // 打包出口，chunk输出的位置
  output: { 
    // 打包生成的文件名
    filename: '[name].[contenthash].js',
    // output 目录对应一个绝对路径。
    path: path.resolve(__dirname, 'dist'),
    // 该选项的值是以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 的前缀。在多项目混合时会用到。
    publicPath: '/',
    // 每次打包时，清空旧的文件。旧版webpack可能没这个选项，用的插件实现
    clean: true
  },
  // 启用监听文件变化，文件一变化就重新打包
  watch: true,
  // 监听配置
  watchOptions: {
    // 忽略文件
    ignored: /node_modules/,
  },
  // 从 webpack 4 开始，默认会根据你选择的 mode 来执行不同的优化， 该配置对默认优化进行更改。
  optimization: {
    // 做缓存优化时可以研究一下该值，single 将 runtime 代码拆分为一个单独的 chunk
    runtimeChunk: 'single',
    // SplitChunksPlugin 插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。
    splitChunks: {
      // 打包所有
      chunks: 'all',
      // 对第三方库包进行分组，通常第三方包更新比较少，通过单独打包可以更好利用浏览器缓存机制优化网站
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      }
    },
  },
};

补充内容

manifest ，假如你想用缓存优化项目性能，可以看看manifest，manifest是打包文件在浏览器工作的一些原理。

包分析工具

webpack-chart: webpack stats 可交互饼图。

webpack-visualizer: 可视化并分析你的 bundle，检查哪些模块占用空间，哪些可能是重复使用的。

webpack-bundle-analyzer：一个 plugin 和 CLI 工具，它将 bundle 内容展示为一个便捷的、交互式、可缩放的树状图形式。

webpack bundle optimize helper：这个工具会分析你的 bundle，并提供可操作的改进措施，以减少 bundle 的大小。

bundle-stats：生成一个 bundle 报告（bundle 大小、资源、模块），并比较不同构建之间的结果。

webpack 提供几种可选方式，帮助你在代码发生变化后自动编译代码：

1.webpack's Watch Mode 需手动刷新页面，优点是方便快捷

2.webpack-dev-server 既能更新又能刷新，缺点是不适合定制开发

3.webpack-dev-middleware 是中间件，可以编写自己的后端服务然后把它整合进来，相对而言比较灵活自由。这个和watch mode有点像，不过是用的内存。返回一个中间件供其他服务使用。