WebPack5

总结

asset/resource 和 asset 的区别

type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式

use 和 loader 区别

rules: [
  {
    test: /\.css$/i,
    use: [...], // use可以使用多个loader
    loader: 'style-loader',// loader只能使用一个loader
  },
]``;

webpack.dev.js 和 webpack.config.js 区别

path 改为 undefined
绝对路径的地方回退一层目录
相对路径是相对于执行环境的,执行环境是没有变的

webpack.prod.js 和 webpack.config.js 区别

path 需要回退一层目录
绝对路径的地方回退一层目录,相对路径是相对于执行环境的,执行环境是没有变的
删除 devServer
mode 改为 production

npm start

只有这个不需要加 run 其他都需要加 run

postcss-loader

需要加到 css 后面 less 前面

'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
{
    loader: "postcss-loader",
    options: {
        postcssOptions: {
            plugins: [
                "postcss-preset-env", // 能解决大多数样式兼容性问题
            ],
        },
    },
},
// 将 Sass 编译成 CSS
'sass-loader',

同时需要配置

  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ]

dev-tool

开发模式：cheap-module-source-map

优点：打包编译速度快，只包含行映射 缺点：没有列映射

module.exports = {
  // 其他省略
  mode: "development",
  devtool: "cheap-module-source-map",
};

生产模式：source-map 优点：包含行/列映射 缺点：打包编译速度更慢

module.exports = {
  // 其他省略
  mode: "production",
  devtool: "source-map",
};

include 和 exclude

两者只能存在一个
一般只处理 js 文件

cacheCompression

cacheCompression: false,    // 关闭缓存文件压缩(压缩也是耗时的,关闭无外乎占用内存,但是可以提速)

import eslint报错

// eslint无法识别这个写法,需要加插件  plugins: ["import"]
import("./count")
  .then((res) => {
    console.log("模块加载成功,", res.count(2, 1));
  })
  .catch((err) => {
    console.log("模块加载失败,", res);
  });

统一命名配置

  output: {
    filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
    chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式
    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
  },

  // 提取css成单独文件
  new MiniCssExtractPlugin({
    // 定义输出文件名和目录
    filename: "static/css/[name].css",
    chunkFilename: "static/css/[name].chunk.css",
  }),

 // 提取runtime文件
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`, // runtime文件命名规则
    },

cross-env

可以解决 babel-preset-react-app 针对于环境变量的报错,因为这个 babel-preset-react-app 不能拿 webpack.dev.js 里面的mode,所以需要设置一个 变量给他使用

HMR 热更新

css是通过style-loader实现的
js是通过 @pmmmwh/react-refresh-webpack-plugin  react-refresh/babel 一起实现的

minimizer

optimization: {
  // 压缩文件都在这里做
  minimizer: [];
}

DefinePlugin 定义变量

// cress-enr定义的环境变量是给打包工具使用
// DefinePlugin是给项目使用的

vue 的局部热更新

是通过 vue-style-loader  和 vue-loader 实现的