简介：
mini-css-extract-plugin 帮助我们从成的js中把css部分剥离出来，生成新的css文件。
使用方式简单，是extract-text-webpack-plugin的替代品
- 安装 npm i -D mini-css-extract-plugin
- 修改
webpack.config.js
const path= require ('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry:'./app.js',
output: {
filename:'bundle.js',
path: path.resolve( __dirname,'dist')
},
module:{
rules:[
{
test:/\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins:[
new MiniCssExtractPlugin(
{
filename: `[name].css`
}
)
],
mode: 'none'
}
webpack4.0 推荐使用MiniCssExtractPlugin，对css进行处理。它会从bundle.js中提取css代码，在plugins指定生成的文件名称。MiniCssExtractPlugin相对于老版本的ExtractTextPlugin
使用方式也更好理解些。下面我们来回顾一下使用loader是怎么处理的。
module:{
rules:[
{
test:/\.css$/,
use: ['style-loader', 'css-loader'],
}
]
}
其实从形式上来看MiniCssExtractPlugin.loader就是替代style-loader，具体的实现了什么，我们后续再讨论。
既然是从bundle.js中剥离出css来，那总要生成文件吧，那么plugins的配置项就有存在的意义了。
- 修改index.html引入生成的文件
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> </head>
<link href="./dist/main.css" rel="stylesheet" type="text/css" />
<body> <div id="app" ></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
可以查看dist 文件夹，已经生成了main.css， 直接引用就行
上一篇 2.webpack入门使用loader处理css
下一篇 4. webpack4.0 热跟新webpack-dev-server的使用
网友评论