loader
webpack除了4中资源模块的方式（resource、 inline、source、asset）可以解析加载其他类型的文件。还可以通过loader去解析其他类型的文件，并将这些文件转换成有效的模块。
加载解析css文件
- 安装css-loader以及style-loader
直接通过js引入css文件无法识别，需要通过css-loader。
样式无法加载到页面上，需要通过style-loader。
/* style.css */
.hello{
}
/* style.less*/
@color:pink;
body{
background-color:@color;
}
//本地安装css-loader
npm install css-loader -D
//本地安装css-loader
npm install style-loader -D
//本地安装less-loader
npm install less-loader less -D
//本地安装sass-loader
npm install sass-loader sass -D
//webpack.config.js
module.exports = {
module:{
rules:[
// 使用style-loader、css-loader
{
test:/\.css$/,
// 顺序不能写错，这个顺序是从后往前加载，链式调用。
// 先加载(less或者sass),css-loader,在加载style-loader
use:['style-loader','css-loader','less-loader']
},
//使用less-loader（sass-loader引入方式一致）
{
test:/\.less$/,
// 顺序不能写错，这个顺序是从后往前加载，链式调用。
// 先加载(less或者sass),css-loader,在加载style-loader
use:['style-loader','css-loader','less-loader']
},
]
}
}
//index.js
import './style.css'
import './style.less'
// 给body添加class='hello'
document.body.classList.add('hello')
抽离和压缩css（mini-css-extract-plugin、css-minimizer-webpack-plugin）
- 上面的代码讲述了如何解析加载css文件，运行效果是直接在body里面通过style标签去添加。我们希望能把上面的style.css以及style.less抽离合并在一个文件里面，通过link的方式去加载css。实现这个功能需要用到插件mini-css-extract-plugin。（说明：这个插件是基于webpack5构建的，请注意webpack版本！！！）
//安装插件mini-css-extract-plugin
npm install mini-css-extract-plugin -D
//webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
plugins:[
// mini-css-extract-plugin插件
new MiniCssExtractPlugin({
// 打包后css文件名字 (styles/xxx.css)
// contenthash根据文件的内容生成hash字符串
filename:'styles/[contenthash].css'
})
],
module:{
rules:[
// 使用mini-css-extract-plugin-loader、css-loader、less-loader
{
test:/\.(css|less)$/,
// 顺序不能写错，这个顺序是从后往前加载，链式调用。
// 先加载(less或者sass),css-loader,在加载MiniCssExtractPlugin.loader
use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
}
]
}
}
- 上面的代码讲述了如何style.css以及style.less抽离合并在一个文件css文件里面，通过link的方式去加载css。我们发现合并后的代码如下图所示。我们希望能在生产环境下把代码压缩成一行在提升css加载的效率。我们需要用到插件css-minimizer-webpack-plugin来实现。
//安装css-minimizer-webpack-plugin
npm install css-minimizer-webpack-plugin -D
//webpack.config.js
// css-minimizer-webpack-plugin插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
// mode环境 development开发 production生产 none无
mode:'production', //mode改成生产环境
optimization:{
minimizer:[
new CssMinimizerPlugin()
]
}
}
css中加载images图片以及fonts字体。
webpack.config.js中的mode改成development开发环境。
- 加载images图片
/* style.css */
.img-bg{
background-image: url('./assets/logo.png');
background-color: transparent !important;
border: 1px solid black;
}
//index.js
const box = document.createElement('div')
box.style.cssText = 'width:200px;height:200px;background-color:red;'
box.classList.add('img-bg')
box.textContent = examplateTxt
document.body.appendChild(box)
运行代码就可以看到对应的背景图片添加成功了。
- 加载fonts字体
//webpack.config.js
module.exports = {
module:{
rules:[
// 使用resource类型加载字体文件
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
type:'asset/resource',
},
]
}
}
//index.js
const span = document.createElement('span')
span.style.cssText = 'color:red;'
span.classList.add('icon')
span.innerHTML = ''
document.body.appendChild(span)
/* style.css */
@font-face {
font-family: 'iconfont';
src: url('./assets/iconfont.ttf') format('truetype');
}
.icon{
font-family: "iconfont" !important;
font-size: 30px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
运行代码就可以看到页面上多了一个红色的爱心，说明字体图标添加成功了。
加载其它类型的数据csv、tsv，xml以及toml，yaml，json5格式的数据。
- csv、tsv，xml文件解析
//本地安装csv和xml loader
npm install csv-loader xml-loader -D
//webpack.config.js
module.exports = {
module:{
rules:[
// 引入csv、tsv loader
{
test:/\.(csv|tsv)$/,
use:'csv-loader',
},
// 引入xml loader
{
test:/\.xml$/,
use:'xml-loader',
},
]
}
}
//index.js
import dataCsv from './assets/data.csv';
import dataXml from './assets/data.xml';
console.log('csv',dataCsv)
console.log('xml',dataXml)
代码运行结果如上图。data.csv会转换成一个数组对象，data.xml会转化成一个对象。
- toml，yaml，json5文件解析
//本地安装toml、yaml、json5
npm install toml yaml json5 -D
//webpack.config.js
// toml yaml json5
const toml = require('toml')
const yaml = require('yaml')
const json5 = require('json5')
module.exports = {
module:{
rules:[
// 引入toml
{
test:/\.toml$/,
type:'json',
// 解析器
parser:{
parse:toml.parse
}
},
// 引入yaml
{
test:/\.yaml$/,
type:'json',
// 解析器
parser:{
parse:yaml.parse
}
},
// 引入json5
{
test:/\.json5$/,
type:'json',
// 解析器
parser:{
parse:json5.parse
}
},
]
}
}
//index.js
import dataToml from './assets/data.toml';
import dataYaml from './assets/data.yaml';
import dataJson5 from './assets/data.json5';
console.log('toml',dataToml)
console.log('yaml',dataYaml)
console.log('json5',dataJson5)
代码运行结果如上图。可以看到toml、yaml、json5格式的数据被正确的解析出来了。
