webpack的常用配置项

1. mode:'development' //开发环境

配置对应的环境：development、production、none

2. devtool:'inline-source-map'

//为了方便看打包后的代码，设置inline-source-map方便看打包后的源代码

3. entry:"./src/index.js" // 入口文件路径
4. output: //打包后的文件

output: { // 打包后的文件名
  filename: 'dist.js', // 打包后的文件名
  path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
}

5. plugins:// 打包插件, HtmlWebpackPlugin

plugins: [
  new HtmlWebpackPlugin({
    title: "webpack打包项", // 网页的标题
  }),
];

6. module：// 配置打包规则，以什么样的扩展名结尾就匹配什么样的loader,style-loader,css-loader,babel-loader, 图片就直接用type:asset/resource

module: {
  rules: [
    {
      test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
      use: ["style-loader", "css-loader"], // 使用什么loader
    },
    {
      test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
      type: "asset/resource", // 使用内部的loader，所以使用type
    },
    {
      test: /\.js$/,
      exclude: /node_modules/, // 把node_modules这个文件去掉，这样就不会转义node_modules下面的代码
      use: {
        loader: "babel-loader", // 使用的loader
        options: {
          presets: ["@babel/preset-env"], // 转义loader
        },
      },
    },
  ];
}

7. optimization:是否压缩

optimization: { 
     minimize: true, // 是否压缩 
     minimizer: [new TerserPlugin()], // 用什么工具压缩 
},

8. devServer：配置开发服务器，用于开发环境下的热更新，代理等功能。
9. performance: 配置如何展示性能提示，例如一个资源超过250kb，webpack会对此输出一个警告来通知。

 performance: {
    assetFilter: function (assetFilename) {
      return assetFilename.endsWith('.js');
    },
  },