const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin"); // 自动引入资源插件  npm install --save-dev html-webpack-pluginconst MiniCssExtracPlugin = require("mini-css-extrac-plugin"); // css抽离const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // css压缩//加载toml、yarm、json5数据资源 npm install toml yarm json5 -Dconst toml = require("toml");      const yarm = require("yarm");      const json5 = require("json5");   module.exports = {  entry: "./src/index.js", // 入口文件  output: {    filename: "bundle.js",    path: path.resolve(__dirname, "./dist"),    clean: true, // 清除上一次的垃圾文件    assetModuleFilename: "images/[contenthash][ext]", // 在images目录下，根据文件内容自动生成hash文件名  },  mode: "development", // 开发环境  devtool: "inline-source-map", // 真实报错文件指向  // 插件  plugins: [    new HtmlWebpackPlugin({      template: "./index.html", // 模板      filename: "app.html",      inject: "body", // script 存在的位置    }),    new MiniCssExtracPlugin({      filename: "style/[contenthash].css",    }),  ],  devServer: {    static: "./dist", // 监听根目录文件变化，自动刷新页面插件 npm install --save-dev webpack-dev-server  },  // 模块  module: {    rules: [    //资源模块类型我们称之为Asset Modules Type，总共有四种，来代替loader，分别是：    // asset/resource：发送一个单独的文件并导出URL，替代file-loader    // asset/inline：导出一个资源的data URI(base64)，替代url-loader    // asset/source：导出资源的源代码，之前通过使用raw-loader实现    // asset：介于asset/resource和asset/inline之间， 之前通过url-loader+limit属性实现。     {        test: /\.(png|gif|jp?g|svg|webp|ico)$/, // 正则图片文件        type: "asset",        generator: {          filename: "images/[contenthash][ext]", // 优先级高于 assetModuleFilename        },     },     {        //抽离 npm install mini-css-extrac-plugin  --save-dev   webpack5环境下构建的插件        test: /\.(le|c)ss$/, // .less and .css        use: [MiniCssExtracPlugin.loader, "css-loader", "less-loader"],      },      // {      //   //支持less      //   // npm install style-loader css-loader less-loader less --save-dev      //   test: /\.(le|c)ss$/, // .less and .css      //   use: ["style-loader", "css-loader", "less-loader"], // 创建的css文件存在html的头部      // },      {        test: /\.(woff|woff2|eot|ttf|oft)$/, // 正则字体文件        type: "asset/resource",      },      //加载csv、xml数据资源 npm install csv-loader xml-loader -D      {        test: /\.(csv|tsv)$/,         use:'csv-loader'      },      {        test: /\.xml$/,         use:'xml-loader'      },      //加载toml、yarm、json5数据资源      {        test: /\.toml$/,         type:'json',        parser:{          parse:toml.parse        }       },       {        test: /\.yarm$/,         type:'json',        parser:{          parse:yarm.parse        }       },       {        test: /\.json5$/,         type:'json',        parser:{          parse:json5.parse        }       },      // loader工具 支持数组方式链式调用，数组靠后的元素先执行      {      // 压缩图片      //图片小于一定大小使用base64 否则使用file-loader产生真实图片 npm install url-loader --save-dev        test: /\.(png|gif|jp?g|svg|webp|ico)$/, // 正则        use: [          {            loader: "url-loader",            options: {              limit: 5000, //小于限定使用base64              name: "home/images/[name].[hash:8].[ext]",              publicPath: `../../`,              esModule: false,            },          },        ],      },      // 使用babel-loader npm install -D babel-loader @babel/core @babel/preset-env       // regeneratorRuntime是webpack打包生成的全局辅助函数，由babel生成，用于兼容 async/await 的语法      // npm install --save @babel/runtime      // npm install --save-dev @babel/plugin-transform-runtime      {        test: /\.js$/,        exclude: /node_modules/, // *业务代码里面可能会引入node_modules外部js，这些js不需要babel-loader编译，因此需要排除掉        use: {          loader: 'babel-loader', // *引入babel-loader          options: {            presets: ['@babel/preset-env'], // *引入预设            plugins: [            [              '@babel/plugin-transform-runtime' // *配置插件信息            ]          ]          }        }      }    ],  },  optimization: {    //压缩 npm install css-minimizer-webpack-plugin  --save-dev   mode改为 production    minimizer: [new CssMinimizerWebpackPlugin()],  },};