webpack5 动态导入实现按需加载与统一文件命名配置

console.log("hello main");
 
document.getElementById("btn").onClick = function () {
   // 动态导入 --> 实现按需加载  -->then是加载成功要做的处理不处理的话可以不写
 
  import( "./js/math.js").then(({ count }) => {
    console.log(count(2, 1));
  });
};

console.log("hello main");
 
document.getElementById("btn").onClick = function () {
   // 动态导入 --> 实现按需加载  -->then是加载成功要做的处理不处理的话可以不写
  // eslint会对动态导入语法报错，需要修改eslint配置文件
  // webpackChunkName: "math"：这是webpack动态导入模块命名的方式
  // "math"将来就会作为[name]的值显示。
  import(/* webpackChunkName: "math" */ "./js/math.js").then(({ count }) => {
    console.log(count(2, 1));
  });
};

// .eslintrc.js
module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
 // 解决动态导入import语法报错问题 --> 实际使用eslint-plugin-import的规则解决的
  plugins: ["import"],
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
 
};

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
    chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式
    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
  },
  module: {
    rules: [
      // loader的配置
      {
        oneOf: [
 // https://webpack.docschina.org/guides/asset-modules/#resource-assets
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/, //$匹配结尾，在多行检测中，会匹配一行的结尾
            type: "asset", //转base64
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024, // 小于10kb的图片转为base64,用于减少请求数据,但体积会大一点点
              },
            },
            // generator: {assetModuleFilename统一定义
            //   // 生成输出的图片名字[hash:10]表示只取前10位
            //   // ext:扩展名
            //   // query图片参数
            //   filename: "static/images/[hash:10][ext][query]",
            // },
          },
          {
            test: /\.(ttf|woff2?|mp3|mp4|avi)$/, //匹配字体图标库或者视频文件
            type: "asset/resource", //resource对文件原样的输出
            // generator: { assetModuleFilename 统一定义
            //   //输出media名称
            //   filename: "static/media/[hash:10][ext][query]",
            // },
          },
            ]
        }
    ]
},
 plugins: [
        //如果用到了css插件也要改一下
         // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/[name].css",
      chunkFilename: "static/css/[name].chunk.css",
    }),
    ],
  optimization: {
    minimizer: [
// 代码分割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行分割
      // 其他内容用默认配置即可
    },
    // 提取runtime文件(防止被依赖的主文件随着变化而变化)
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`, // runtime文件命名规则
    },
    ]}
}