- Web pack extracts CSS files
- CSSTreeShaking
1. Extracting CSS files from webpack
Plug-in for extracting CSS files: mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
Detailed reference: https://www.npmjs.com/package/mini-css-extract-plugin
But the premise is to download a css loader:
npm install css-loader --save-dev
Test the workspace file structure:
//Working interval src//Folder index.js//Main entrance js file demo.css//Dependent css file index.html//Used for testing html Structural document webpack.config.js//Project Profile package.json//configuration system file
The main entry file index.js (introducing the dependent style file demo.css into the main entry file):
import './demo.css';
Depending on the style file demo.css file (given some test code):
body{background-color: #333;}
div{
width: 300px;
height: 300px;
background-color: #ffa;
}
a{color: red;}
h1{color:blue;}
Specific configuration code of the project configuration file webpack.config.js file:
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 }
It should be noted that in the modeule loader, the world writes the name of the plug-in when the use configures the plug-in, which is based on the name of the plug-in module introduced by require, and then adds the loader suffix after the name. You can't use strings and dashes as you would with the loader that comes with webpack.
Then configure this plugin in the plugins plug-in. The output name is the same as the output js file name. Here I do not configure the output attribute js file is not main.js by default, so the output CSS name is also the default main.css. If you need to know the output name configuration, refer to this blog: Web pack installation and core concepts
webpack
After successful packaging, the main.js and main.css files will be generated in dist, then the generated main.css files will be introduced into the test html files, or the main.css files can be opened directly with the editor to view, you will be surprised to find that it is exactly the same as the demo.css code.
2. CSSTreeShaking
Here you need to download two plug-ins: purify css-webpack purify-css
npm install purifycss-webpack purify-css --save-dev
Then configure the project configuration file webpack.config.js: (add configuration based on the above)
1 const path = require('path'); 2 const glob = require('glob'); 3 const PurifyCSSPlugin = require('purifycss-webpack'); 4 //Plug-in Configuration 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 // Configure this css Documentary html File path--There's only one of my test projects. html Files are given directly to all the files in the root directory html file 14 paths: glob.sync(path.join(__dirname, './*.html')), 15 }) 16 ]
When configuring plugins configuration, it should be noted that if you have jsTreeShaking operation in the project at the same time, you must configure CSSTreeShaking in front of js, otherwise you will make a mistake! The following is the html file code I rely on:
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>
At this point, the packaging is executed again. If the packaging is executed correctly, there will only be body and div style code in main.css, which is the whole operation of CSSTreeShaking. https://www.npmjs.com/package/purifycss-webpack
Don't worry, it's not over yet.
In the actual development, there must be the case that JS inserts HTML file structure. At this time, if only configurable HTML file is added to js, it will certainly not be able to monitor the HTML structure, such as the main entry JS file code in the test.
1 import './demo.css'; 2 var div = document.getElementsByTagName('div')[0]; 3 div.innerHTML = '<a>test CssTreeShaking</a>';
At this point, you need to add the js file of this css file to the plugins, and the test code needs to be added as follows:
1 new PurifyCSSPlugin({ 2 // Configure this css Documentary html File path--There's only one of my test projects. html Files are given directly to all the files in the root directory html file 3 paths: glob.sync([ 4 path.join(__dirname, './*.html'), 5 path.join(__dirname, './src/*.js') 6 ]), 7 })
In addition to configuration action files, because js matching also requires configuration global matching, the configuration file also needs to change a line of code (find the corresponding modification code according to the variable name):
const glob = require('glob-all');
Then you need to download the glob-all module:
npm install glob-all --save-dev
At this point, the correct packaging main.css code contains three tag styles: body, div and a.