在上一节中,我学到了.
使用 style-loader 搭配 css-loader less-loader stylus-loader .
可以让 webpack 在遇到 import xxx.css|less|stylus|文件的时候
将 .css .less .stylus 文件写入到 index.html 的 head.<style></style> 标签中.
把 .css .less .stylus 文件单独抽离出来
在之前的前端开发中,我们很基本都是把 .css 文件单独抽离出来.
然后在页面中使用 <link rel="stylesheet" href="./css/main.css">'的方式导入 css 文件.
那么在 webpack 中,如何去把这些文件单独导出到一个文件,而非都是利用 style-loader 打包到
index.html.body.head.<style></style> 中去呢?
使用 extract-text-webpack-plugin 插件抽离出来一个独立的css文件.
step 1.
首先还是搭建一个项目.
写入最基本的 webpack.config.js 文件.
const path = require('path')
module.exports = {
entry: path.join(__dirname, 'app/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader:'babel-loader' // 两个作用 1. ESX -> ES5 2. API 垫片
},
{
test: /\.css$/,
// !!!这是打包到 <style></style> 中去了. 我们要单独打包
loader: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
// !!!这是打包到 <style></style> 中去了. 我们要单独打包
loader: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.styl$/,
// !!!这是打包到 <style></style> 中去了. 我们要单独打包
loader: ['style-loader', 'css-loader', 'stylus-loader']
}
]
}
}
请注意:
上面三个 loader 配置的最顶端都是 style-loader.这个肯定不行.我们需要改写的.
step 2.
安装 extract-text-webpack-plugin
npm i --save-dev extract-text-webpack-plugin
step 3.
导入 extract-text-webpack-plugin 插件.
// 引入插件
const ExtractTextPlugin = require('extract-text-webpack-plugin')
step 4.
改写 css | less | stylus 的 配置.
module: {
rules: [
{
test: /\.css$/,
// 注意:这里的写法是把.css文件写入 html.head.style
// use: ['style-loader', 'css-loader']
use: ExtractTextPlugin.extract({ // 1.这里配置提取css文件
fallback: 'style-loader',// 如果提取失败,就使用style-loader加载到页面
use: 'css-loader'
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
})
},
{
test: /\.styl$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'stylus-loader']
})
}
]
}
-
fallback:意思是,如果打包单个文件失败了,就还是利用style-loader写入HTML文件的<style></style>中.
step 5.
创建index.html 以及 .css|.less|.stylus文件.
并分别键入代码.
.css
.css-control {
font-size: 20px;
color: red;
}
.css::after {
content: '我的样式由css.css提供,但最终被webpack打包进了main.css中'
}
.less
.less-control {
font-size: 30px;
color: green;
&::after {
content: '我的样式由less.less提供,但最终被webpack打包进了main.css中'
}
}
.stylus-control
font 40px
color yellow
&::after
content: '我的样式由stylus.styl提供,但最终被webpack打包进了main.css中'
step 6.
在 index.js 文件中导入这三个文件.
step 7.
在 webpack.config.js 的 plugins 节点中 配置 extract-text-webpack-plugin 插件.
并执行输出打包的单个文件名和路径.
module: {
rules: [
{
test: /\.css$/,
// 注意:这里的写法是把.css文件写入 html.head.style
// use: ['style-loader', 'css-loader']
use: ExtractTextPlugin.extract({ // 1.这里配置提取css文件
fallback: 'style-loader',// 如果提取失败,就使用style-loader加载到页面
use: 'css-loader'
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
})
},
{
test: /\.styl$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'stylus-loader']
})
}
]
},
plugins: [
// 这里配置css文件存储路径
// output.path + css/filename.css
new ExtractTextPlugin('css/main.css')
]
这里就是为什么,我在 index.html 的 link 键入的是 ./css/main.css 的原因.
step 8.
运行 npm run build
打开 index.html 页面,查看效果.
打开 dist 文件夹和 浏览器请求列表
总结:
我们可以使用 extract-text-webpack-plugin 将程序中的多个.css|.less|.styl文件,单独打包成一个.css文件.
