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文件的具体配置代码：

 const MiniCssExtractPlugin = require ('mini-css-extract-plugin');

 module.exports = {

     module:{

         rules:[

             {

                 test:/\.css$/,

                 use:[MiniCssExtractPlugin.loader,'css-loader']

             }

         ]

     },

     plugins:[

         new MiniCssExtractPlugin({

             // Options similar to the same options in webpackOptions.output

             // both options are optional

             filename: '[name].css',

             // chunkFilename: '[id].css',

           })

     ]

 }

需要注意的是在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:(在上面的基础上添加配置)

 const path = require('path');

 const glob = require('glob');

 const PurifyCSSPlugin = require('purifycss-webpack');

 //插件配置

 plugins:[

     new MiniCssExtractPlugin({

         // Options similar to the same options in webpackOptions.output

         // both options are optional

         filename: '[name].css',

         // chunkFilename: '[id].css',

         }),

         new PurifyCSSPlugin({

         // 配置这个css文件作用的html文件路径--我的测试项目中只有一个html文件，直接给了根目录下的所有html文件

         paths: glob.sync(path.join(__dirname, './*.html')),

         })

 ]

在配置插件plugins配置的时候需要注意，如果同时在项目中又jsTreeShaking操作的话，一定要将CSSTreeShaking配置在js的前面，不然会报错！下面给出我依赖的html文件代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <link rel="stylesheet" href="./dist/main.css">

 </head>

 <body>

     <div></div>

 </body>

 </html>

这时候再次执行打包，如果正确执行了打包的话，在main.css中就只存在body和div的样式代码了，这就是CSSTreeShaking的全部操作。https://www.npmjs.com/package/purifycss-webpack

别着急，还没结束呢！

在实际开发中一定存在js插入HTML文件结构的情况，这时候如果只配置作用的html文件是肯定不能监听到js中添加的html结构，比如测试中的主入口js文件代码是这样：

 import './demo.css';

 var div = document.getElementsByTagName('div')[0];

 div.innerHTML = '<a>测试CssTreeShaking</a>';

这时候就需要在plugins中添加这个css文件作用的js文件了，测试代码需要这样添加：

 new PurifyCSSPlugin({

 // 配置这个css文件作用的html文件路径--我的测试项目中只有一个html文件，直接给了根目录下的所有html文件

     paths: glob.sync([

         path.join(__dirname, './*.html'),

         path.join(__dirname, './src/*.js')

     ]),

 })

除了配置作用文件以外，因为js匹配还需要配置全局匹配，所以配置文件还需要改一行代码（根据变量名找到对应的修改代码）：

const glob = require('glob-all');

然后还需要下载这个glob-all模块：

npm install glob-all --save-dev

这时再执行打包的话，正确的打包main.css代码包含了body、div、a三个标签样式。