module

打包css文件

配置文档

打包图片

配置文档

打包高兼容的js文件

配置文档

打包vue2

配置文档

打包vue3

配置文档

打包ts

配置文档

打包less

配置文档 问题：

<style lang="less" scoped>
@shejigao: 7.5vw;
.btn {
  width: (100/@shejigao);
}
</style>

需要加括话 不然不生效。 解决方法

固定less和less-loader的版本
    "less": "3.9.0",
    "less-loader": "5.0.0",

给所有样式文件添加css函数

style-resources-loader;

a文件定义了全局css函数
.rect-bg(@url) {
  background-image: url(@url);
  background-size : 100% 100%;
}

b文件不想用带脉引用a文件的全局函数，但又想使用
div{
  .rect-bg('a.png')
}

注意，通常用来设置添加css函数

其他常用loader说明

juejin.cn/post/710034…

plugins

html-webpack-plugin

作用

当打包项目的时候，会自动生成html文件，并且将打包后的文件自动引入这个html文件。

官方文档

clean-webpack-plugin

作用

删除dist文件夹里面所有的文件

官方文档

mini-css-extract-plugin

作用

将js里面引用的css文件单独打包成一个css文件。

官方文档

css-minimizer-webpack-plugin

作用

对css文件进行压缩

官方文档

webpack.DefinePlugin

作用

在浏览器环境下设置全局变量。

遇到的坑

配置的环境是reat+ts,在DefinePlugin设置一般的key值，是没有生效的。
只能设置key值为"process.env.XXXX"才生效

官方文档