loader 用于各类资源的解决
loader 用于解决其余类型资源;什么是其余类型?就是各个类型都行,例如:css,scss,sass,stylus,ts,png,jpg,jpeg,font,svg… 你能想到的所有资源都能够通过此属性来解决,包含门路解决,文件解决,不反对的语言解析都能够通过这个解决。
这里我列 6 个:
babel-loader
ts-loader
css-loader
sass-loader
style-loader
MiniCssExtractPlugin.loader
以上这些都是对于 js 和 css 解决的 loader。对于图片、字体等其余动态资源文件,我再当前的文章中会给大家介绍到。
本章次要讲述 js 和 css 相干的 loader。
// webpack.config.js
...
module: {
rules: [
{
test: /\.css$/, // 用于匹配文件, 能够是字符串或者正则
loader: 'css-loader', // 当只有一个的时候就用这个
use: ['style-loader','css-loader',] // 当有多个的时候就用这个,执行程序是从右向左
},
{
test: /\.scss$/, // 用于匹配文件, 能够是字符串或者正则
loader: 'css-loader', // 当只有一个的时候就用这个
use: [MiniCssExtractPlugin.loader, 'style-loader','css-loader', 'sass-loader'] // 执行程序是从右向左
},
{
test: /\.styl$/, // 用于匹配文件, 能够是字符串或者正则
loader: 'stylus-loader', // 当只有一个的时候就用这个
use: [{
loader: 'postcss-loader', // 如果 loader 带有参数,则应用此形式
option: {name: 'stylus'},
},'css-loader', 'stylus-loader'] // 执行程序是从右向左
}
]
}
...
须要留神的是:此前我就曾经说过 css-loader 是只吧 css 文件打包成模块。并未援用到 html 文件。因而须要引入到 html 文件,则须要在 css-loader 解决后在执行 style-loader 把解决后的 css 插入到 html 页面内应用(既生成一个 style 标签插入)。
sass-loader 的应用前须要装置 sass/node-sass
MiniCssExtractPlugin.loader 其实也是个 plugin, 它能够把款式文件拎进去。变成一个 css 文件。既代码宰割,款式宰割。
// webpack.config.js
...
module: {},
plugins: [
new MiniCssExtractPlugin({filename: '[name].min.css', // css 名称
chunkFileName: '[name].chunk_[id].css' // 异步引入的 css 名称
})
]
...
这个 chunk 之前解释过这里再增强一下。chunkFileName 就是异步引入的 css 文件。例如:按需加载的 css。则就会走 chunkFileName 配置的名称。
明天就先讲到这吧,今天再讲 plugin 属性,此属性是最强!