webpack抽取CSS文件与CSSTreeShaking
- 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文件代码：
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三个标签样式。
