webpack中的加载器
通过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$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 4 * 1024 // 4kb
}
}
},
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/ } ] } }
G.配置.vue文件的加载器
A.安装vue组件的加载器
npm install vue-loader vue-template-compiler -D
B.配置规则：更改webpack.config.js的module中的rules数组
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {
......
plugins:[ htmlPlugin, vuePlugin ],
module : {
rules:[
...//其他规则
{
test:/.vue$/,
use: "vue-loader",
}
]
}
}
A.安装Vue
npm install vue -S
B.在index.js中引入vue：import Vue from "vue"
C.创建Vue实例对象并指定el，最后使用render函数渲染单文件组件
const vm = new Vue({
el:"#first",
render:h=>h(app)
})
A.配置package.json
"scripts":{
"dev":"webpack-dev-server",
"build":"webpack -p" //"webpack"
}
B.在项目打包之前，可以将dist目录删除，生成全新的dist目录
