webpack抽取CSS文件与CSSTreeShaking webpack安装与核心概念

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>

View Code

这时候再次执行打包，如果正确执行了打包的话，在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三个标签样式。