webpack 加载器

loader加载器
1.打包处理css文件
1.npm i style-loader css-loader -D 安装处理 css 文件的 loader
2.在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

//modlue.exports={
 // 所有第三方文件模块的匹配规则
 module: {
 	rules: [
 		{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
	 ]
 }

然后在需要调用的文件中import css文件
其中，test 表示匹配的文件类型， use 表示对应要调用的 loader
注意：

1. use 数组中指定的 loader 顺序是固定的
2. 多个 loader 的调用顺序是：从后往前调用

2.打包处理less文件
1.npm i less-loader less -D 安装处理 css 文件的 loader
2.在webpack.config.js的module->rules数组中,添加loader规则如下:

//modlue.exports={
// 所有第三方文件模块的匹配规则
module:{
        rules:[
            {test:/\.css$/,use:["style-loader","css-loader"]},
            //less规则
            {test:/\.less$/,use:["style-loader","css-loader","less-loader"]}
        ]
    }

然后在需要调用的文件中import less文件

3.打包处scss文件
1.npm i sass-loader node-sass -D 安装处理sass文件的loader
2…在webpack.config.js的module->rules数组中,添加loader规则如下:

//modlue.exports={
// 所有第三方文件模块的匹配规则
module:{
        rules:[
            {test:/\.css$/,use:["style-loader","css-loader"]},
            //less规则
            {test:/\.less$/,use:["style-loader","css-loader","less-loader"]},
            //scss规则
            {test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]}
        ]
    }

然后在需要调用的文件中import scss文件

4.配置 postCSS 自动添加 css 的兼容前缀
原本不支持::placeholder该类css,需要兼容
1.npm i postcss-loader autoprefixer -D 安装
2.在项目根目录中创建 postcss 的配置文件 postcss.config.js，并初始化如下配置

const autoprefixer = require("autoprefixer");
module.exports = {
    plugins: ["autoprefixer"] //挂载插件
}

3.在 webpack.config.js 的 module -> rules 数组中，修改 css 的 loader 规则如下：

module: {
    rules: [
                                                                 //添加规则
        { test: /\.css$/, use: ["style-loader", "css-loader","postcss-loader"] },
        { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
        { test: /\.scss$ /, use: ["style-loader", "css-loader", "sass-loader"] }
    ]
}

5.打包样式表中的图片和字体文件
1.npm i url-loader file-loader -D