- webpack抽取CSS文件
- CSSTreeShaking
一、webpack抽取CSS文件
抽取CSS文件的插件:mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
详细参考:https://www.npmjs.com/package/mini-css-extract-plugin
但是前提还是需要下载一个css加载器:
npm install css-loader --save-dev
测试工作区间文件结构:
//工作区间 src//文件夹 index.js//主入口js文件 demo.css//依赖的css文件 index.html//用于测试的html结构文件 webpack.config.js//项目配置文件 package.json//系统配置文件
主入口文件index.js(在主入口文件中引入依赖样式文件demo.css):
import './demo.css';
依赖样式文件demo.css文件(给定一些测试代码):
body{background-color: #333;} div{ width: 300px; height: 300px; background-color: #ffa; } a{color: red;} h1{color:blue;}
项目配置文件webpack.config.js文件的具体配置代码:
1 const MiniCssExtractPlugin = require ('mini-css-extract-plugin'); 2 module.exports = { 3 module:{ 4 rules:[ 5 { 6 test:/\.css$/, 7 use:[MiniCssExtractPlugin.loader,'css-loader'] 8 } 9 ] 10 }, 11 plugins:[ 12 new MiniCssExtractPlugin({ 13 // Options similar to the same options in webpackOptions.output 14 // both options are optional 15 filename: '[name].css', 16 // chunkFilename: '[id].css', 17 }) 18 ] 19 }
需要注意的是在modeule加载器中,在use配置插件时世界写入插件名,以require引入插件模块的命名为准,然后在名称后面添加loader后缀。不能像使用webpack自带的加载器那样使用字符串和中划线的方式。
然后在plugins插件中配置这个插件,输出的名称与输出的js文件名称一致,这里我没有配置输出属性js文件默认未main.js,所以输出的css名称也是默认的main.css。具体需要了解输出名称配置的话参考这篇博客:webpack安装与核心概念
webpack
执行打包成功后会在dist中生成main.js和main.css文件,再在测试的html文件中引入生成的main.css文件,也可以直接使用编辑器打开main.css文件查看,你会惊奇的发现它与demo.css的代码一摸一样。
二、CSSTreeShaking
这里需要下载两个插件:purifycss-webpack purify-css
npm install purifycss-webpack purify-css --save-dev
然后配置项目配置文件webpack.config.js:(在上面的基础上添加配置)
1 const path = require('path'); 2 const glob = require('glob'); 3 const PurifyCSSPlugin = require('purifycss-webpack'); 4 //插件配置 5 plugins:[ 6 new MiniCssExtractPlugin({ 7 // Options similar to the same options in webpackOptions.output 8 // both options are optional 9 filename: '[name].css', 10 // chunkFilename: '[id].css', 11 }), 12 new PurifyCSSPlugin({ 13 // 配置这个css文件作用的html文件路径--我的测试项目中只有一个html文件,直接给了根目录下的所有html文件 14 paths: glob.sync(path.join(__dirname, './*.html')), 15 }) 16 ]
在配置插件plugins配置的时候需要注意,如果同时在项目中又jsTreeShaking操作的话,一定要将CSSTreeShaking配置在js的前面,不然会报错!下面给出我依赖的html文件代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet" href="./dist/main.css"> 9 </head> 10 <body> 11 <div></div> 12 </body> 13 </html>
这时候再次执行打包,如果正确执行了打包的话,在main.css中就只存在body和div的样式代码了,这就是CSSTreeShaking的全部操作。https://www.npmjs.com/package/purifycss-webpack
别着急,还没结束呢!
在实际开发中一定存在js插入HTML文件结构的情况,这时候如果只配置作用的html文件是肯定不能监听到js中添加的html结构,比如测试中的主入口js文件代码是这样:
1 import './demo.css'; 2 var div = document.getElementsByTagName('div')[0]; 3 div.innerHTML = '<a>测试CssTreeShaking</a>';
这时候就需要在plugins中添加这个css文件作用的js文件了,测试代码需要这样添加:
1 new PurifyCSSPlugin({ 2 // 配置这个css文件作用的html文件路径--我的测试项目中只有一个html文件,直接给了根目录下的所有html文件 3 paths: glob.sync([ 4 path.join(__dirname, './*.html'), 5 path.join(__dirname, './src/*.js') 6 ]), 7 })
除了配置作用文件以外,因为js匹配还需要配置全局匹配,所以配置文件还需要改一行代码(根据变量名找到对应的修改代码):
const glob = require('glob-all');
然后还需要下载这个glob-all模块:
npm install glob-all --save-dev
这时再执行打包的话,正确的打包main.css代码包含了body、div、a三个标签样式。