webpack5相关

1 配置运行命令

// package.json
{
  // 其他省略
  "scripts": {
    "start": "npm run dev",
    "dev": "npx webpack serve --config ./config/webpack.dev.js",
    "build": "npx webpack --config ./config/webpack.prod.js"
  }
}

以后启动指令：

• 开发模式：npm start 或 npm run dev
• 生产模式：npm run build

2 开发环境配置

webpack.dev.js

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {//处理图片资源
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",//相当于url-loader,小于某个大小的资源会处理成base64
        parser: {//过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理;现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {//处理字体图标/音视频资源
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",//相当于file-loader
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

3 生产环境配置

webpack.prod.js

CSS兼容性：我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。配置见：GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env

压缩css:css-minimizer-webpack-plugin

html 压缩和 js 压缩：默认生产模式已经开启了，不需要额外进行配置

eslint：eslint-webpack-plugin 配置见eslint_史学娇的博客-CSDN博客

多进程： eslint 、babel、Terser 三个工具

减少babel体积：禁用了 Babel 自动对每个文件的 runtime 注入，使所有辅助代码作为一个独立模块，来避免重复引入。

图片压缩：本地项目静态图片

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const os = require("os");
const threads = os.cpus().length;
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), 
    filename: "static/js/main.js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,                     
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {//babel多进程
            test: /\.js$/,
            // exclude: /node_modules/, // 排除node_modules代码不编译
            include: path.resolve(__dirname, "../src"), // 也可以用包含
            use: [
              {
                loader: "thread-loader", // 开启多进程
                options: {
                  workers: threads, // 数量
                },
              },
              {
                loader: "babel-loader",
                options: {
                  cacheDirectory: true, // 开启babel编译缓存,
                  cacheCompression: false, // 关闭缓存文件压缩
                  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积:npm i @babel/plugin-transform-runtime -D
                },
              },
            ],
          },
    ],
  },
  plugins: [
    // css压缩
    // new CssMinimizerPlugin(),
    // 压缩图片（无损压缩）
    // 无损：npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
    //有损：npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      // css压缩也可以写到optimization.minimizer里面，效果一样的
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
      new TerserPlugin({
        parallel: threads // 开启多进程
      })
    ],
  },
  mode: "production",
};

4 性能优化

4.1 preload

const path = require("path");
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), 
  },
  plugins: [
    new PreloadWebpackPlugin({
      rel: "preload", // preload兼容性更好
      as: "script",
      // rel: 'prefetch' // prefetch兼容性更差
    }),
  ],
  mode: "production",
};