常见loader的使用
1、less-loader使用。
sass-loader用法与less-loader一致。
这里需要注意的是，有些时候安装了less和less-loader。但是打包的时候会报错，需要考虑是否两个版本太高的原因导致，需要降版本降级。
2、postcss-loader使用。
postcss-loader只能编译css以及js。
postcss主要功能只有两个：第⼀就是把css解析成JS可以操作的抽象语法树AST，第⼆就是调⽤插件来处理AST并得到结果.
autoprefixer:⾃动补⻬浏览器前缀.
//webpack.config.js
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
},
//postcss.config.js
module.exports = {
plugins: [
require("autoprefixer")({
overrideBrowserslist: ["last 2 versions", ">1%"]
})
]
};
browserslist 实际上就是声明了⼀段浏览器的集合，我们的⼯具可以根据这段集合描述，针对性的输出兼容性代码。
4、mini-css-extract-plugin:抽离css文件并对css代码进行压缩。
(2)在插件中编写。
(3)使用
(4)在打包后的index.html中进行引入
loader 处理webpack不⽀持的格式⽂件，模块
⼀个loader只处理⼀件事情
loader有执⾏顺序：从右到左，从下到上
5、file-loader:处理静态资源
（1）安装file-loader。
npm install file-loader --save-dev
（2）webpack.congfig.js
webpack.congfig.js的写法：
test: /\.jpeg$/,
use: [
{
loader: 'file-loader',
},
],
},
(3)在index.js中引入准备好的图片。
（4）使用图片：一种是在js中使用，一种是在css中使用。
在js中的使用：
优化点：
我们查看一下dist目录下的文件名字，是一个hash的文件名，太长了，我们需要优化。
use: {
loader: "file-loader",
// options额外的配置，⽐如资源名称
options: {
// placeholder 占位符 [name]⽼资源模块的名称
// [ext]⽼资源模块的后缀
// https://webpack.js.org/loaders/file-loader#placeholders
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "images/"
}
}
outputPath:// 图片输出位置，也就是图片存放的位置
publicPath: // 图片的引用位置，css中如何引用图片，由publicPath进行决定
用file-loader使用字体。
1、在阿里iconfont的网站上下载好，需要用的字体，把.woff放到目录下对应的路径下。
2、再css文件中使用和引入。
@font-face {
font-family: "webfont";
font-display: swap;
src: url("webfont.woff") format("woff"); /* chrome、firefox */
}
div {
font-family: "webfont" !important;
}
webpack.config.js中如下写法：
{
test: /\.(eot|woff)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "assets/css/", // 输出到对应的路径
},
},
},
}
6、url-loader：
url-loader把图片转化成base64,就是file-loader的加强版，内部依赖file-loader。好处是可以减少一次图片的请求，但是在图片体积小于3kb时建议使用，大于3kb不建议使用。
limit的使用含义查看注释。
7、clean-webpack-plugin: 只会保留dist目录下生成的文件，之前额外生成的文件都会去掉。
npm install --save-dev clean-webpack-plugin
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
...
plugins: [
new CleanWebpackPlugin()
]
clean-webpack-plugin:如何做到dist⽬录下某个⽂件或⽬录不被清空： 使⽤配置
项:cleanOnceBeforeBuildPatterns 案例：cleanOnceBeforeBuildPatterns: ["/", "!dll", "!dll/"], ！感叹号相当于exclude 排除，意思是清空操作排除dll⽬录，和dll⽬录下所有⽂件。 注意：数组列表⾥的“/”是默认值，不可忽略，否则不做清空操作。
如何编写一个loader
在webpack.config.js的文件下的配置。
2、module里的写法：
在根目录下创建一个myloades文件夹并创建一个replaceLoader.js文件。
1、loader 只能是普通的函数 不可以是箭头函数。
2、函数里的this指向loader.runner。
打印source会发发现source是文件来源，如下图：
如何使用两个文件。
再创建一个replaceLoaderAsync.js文件。
注意几个点：
1、既然需要使用多个插件，use就需要使用数组。
2、user里的执行顺序是从下到上，从右到左。
即：replaceLoaderAsync文件执行完成以后返回的String和Buffer会传递给下一个插件replaceLoader。
3、this.query的概念。
在写的案例中，this.query指向的options里的数据。
this.callback()
this.async
index.js文件中写法如下：
最后用npm run dev打包。
打开dist目录下的index.html。
打印的内容如下：
说明自定义的laoder编写成功。
编写lsee处理loader
1、再webpack.config.js文件下，把less模块换成自己的编写的loader。
2、在myLoaders文件夹下创建lessLoader.js文件。
这个文件需要引入less模块，然后将less转换成css。
3、在myLoaders文件夹下创建cssLoader.js文件。
这个模块对less文件进行序列化。
4、在myLoaders文件夹下创建styleLoader.js文件。
这个模块任务，样式插入到文件dom中。
5、编写less文件。
最后进行打包，打开index.html,看到如下的样式，即文件处理成功。