通过loader打包非js模块
先了解loader能做点什么事情。
实际开发中,webpack默认只能打包处理.js后缀名结尾的模块,其他非.js结尾的模块无法处理,需要调用loader加载器才可以正常打包,不然会报错
loader加载器可以协助webpack打包处理特定的文件模块,如:
- less-loader 可以打包处理.less相关的文件
- sass-loader可以打包处理.scss相关的文件
- url-loader可以打包处理css中与url路径相关的文件
如下图loader的调用过程
打包处理css文件
- 运行npm install style-loader css-loader -D命令,安装处理css文件的loader
- 在webpack.config.js的module–>rules数组中,添加loader规则:
其中test表示匹配的文件类型,use表示对应要调用的loader
use数组中指定的loader顺序是固定的
多个loader的调用顺序是:从后往前调用
//所有第三方文件模块的匹配规则
module: {
rules: [
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
打包处理less文件
- 运行npm install less-loader less -D命令
- 在webpack.config.js的module–>rules数组中添加loader规则
写入less文件之后,运行npm run dev后less文件会自动写入css文件中
module: {
rules: [
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
打包处理scss文件
- 运行npm install sass-loader node-sass -D 命令
- 在webpack.config.js的module–>rules数组中添加规则
module: {
rules: [
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
]
}
配置postCSS自动添加css兼容性前缀
一般css中有一些选择器在ie低版本不支持,需要手动添加兼容性前缀,但每次添加会比较麻烦,借助postCSS可以快速自动添加
- 运行npm install postcss-loader autoprefixer -D命令
- 在项目根目录中创建postcss的配置文件postcss.config.js并初始化配置
//导入自动添加前缀的插件
const autoprefixer = require('autoprefixer')
module.exports = {
plugins: [ autoprefixer ] //挂载插件
}
- 在webpack.config.js的module–>rules数组中修改css的loader
module: {
rules: [
{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
]
}
打包样式表中的图片和字体文件
- 运行npm install url-loader file-loader -D 命令
- 在webpack.config.js的module–>rules数组中,添加loader规则
其中?之后的是loader的参数
limit用来指定图片的大小,单位是字节,只有大于等于图片的实际大小字节,才会被转为base64图片
module: {
rules: [
{
test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use:'url-loader?limit=图片的大小字节'//如果在图片的大小字节+1,就会把图片地址转换为base64的图片格式,可以提高性能
}
]
}
打包处理js文件中的高级语法
- 安装babel转换器相关的包:npm install babel-loader @babel/core @babel/runtime -D
- 安装babel语法插件相关的包:npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
- 在项目根目录中,创建babel配置文件babel.config.js并初始化基本配置
module.exports = {
presets: [ '@babel/preset-env' ],
plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
}
- 在webpack.config.js的module–>rules数组中添加liader规则
//exclude为排除项,表示babel-loader不需要处理node_modules中的js文件
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}