通过loader打包非js模块：默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器才能打包
loader加载器包含：
1).less-loader
2).sass-loader
3).url-loader:打包处理css中与url路径有关的文件
4).babel-loader:处理高级js语法的加载器
5).postcss-loader
6).css-loader,style-loader
注意：指定多个loader时的顺序是固定的，而调用loader的顺序是从后向前进行调用
A.打包处理css样式
A.安装style-loader,css-loader来处理样式文件
1).安装包
npm install style-loader css-loader -D
2).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
}
]
}
}
B.打包处理less样式
B.安装less,less-loader处理less文件
1).安装包
npm install less-loader less -D
2).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
}
C.打包处理scss文件
C.安装sass-loader,node-sass处理scss文件
1).安装包
npm install sass-loader node-sass -D
2).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
{test:/\.sass$/,use:['style-loader','css-loader','sass-loader']}
]
}
}
补充：安装sass-loader失败时，大部分情况是因为网络原因，详情参考：
https://segmentfault.com/a/1190000010984731?utm_source=tag-newest
D.安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）
D.安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）
1).安装包
npm install postcss-loader autoprefixer -D
2).在项目根目录创建并配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
plugins:[ autoprefixer ]
}
3).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader //将此处加上'postcss-loader'
use:['style-loader','css-loader','postcss-loader']
},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
{test:/\.sass$/,use:['style-loader','css-loader','sass-loader']}
]
}
}
E.打包样式表中的图片以及字体文件
E.打包样式表中的图片以及字体文件
在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理
使用url-loader和file-loader来处理打包图片文件以及字体文件
1).安装包
npm install url-loader file-loader -D
2).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
//limit用来设置字节数，只有小于limit值的图片，才会转换为base64图片
use:"url-loader?limit=16940"
}
]
}
}
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use: [{
loader: 'url-loader',
options: {
limit: '16941',
esModule: false
}
}],
type: 'javascript/auto'
},
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
type: 'asset',
}
F.打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法
F.打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法
有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码
我们需要安装babel系列的包
A.安装babel转换器
npm install babel-loader @babel/core @babel/runtime -D
B.安装babel语法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在项目根目录创建并配置babel.config.js文件
module.exports = {
presets:["@babel/preset-env"],
plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}
D.配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
//limit用来设置字节数，只有小于limit值的图片，才会转换//为base64图片
{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:"url-loader?limit=16940" },
{ test:/\.js$/, use:"babel-loader", //exclude为排除项，意思是不要处理node_modules中的js文件 exclude:/node_modules/ } ] } }
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'] },
{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16941' },
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
{ test: /\.vue$/, use: 'vue-loader' }
]
标签：use,style,loader,webpack,test,js,css,加载 From： https://www.cnblogs.com/wangxianwen/p/16794709.html