Using PurifyCSS can greatly reduce CSS redundancy
1. Installation
cnpm i purifycss-webpack purify-css --save-dev
2. Introduce glob, because we need to check the html template synchronously, so we need to introduce node's glob object to use. Introduce glob at the head of the webpack.config.js file. Introduce purifycss-webpack
3. Configuration
new PruifyCSSPlugin({
paths:glob.sync(path.join(__dirname,'src/*.html'))//all html under src
})
After configuration, we can deliberately write some unused content in the css file. After packaging with webpack, these redundant content will be automatically removed
Front end must learn content: webpack ( module packer )
webpack3 learning content, click to reach
(1). Webpack quick start-how to install webpack and precautions
(2). Webpack quick start-webpack 3.X quickly get started with a Demo
(3). Webpack quick start-configuration files: entry and exit, multi-entry, multi-outlet configuration
(4). Webpack quick start-configuration file: service and hot update
(5). Webpack quick start-CSS file packaging
(6). Webpack quick start-configure JS compression, packaging
(7). Webpack quick start-plug-in configuration: HTML file publishing
(8). Webpack quick start-image processing in CSS
(9). Webpack quick start-CSS separation and image path processing
(10). Webpack quick start-processing images in HTML
(11). Webpack quick start-CSS advanced, packaging and separation of Less files
(12). Webpack quick start-CSS advanced: SASS file packaging and separation
(13). Webpack quick start-CSS advanced: automatic processing of CSS3 prefix
(14). Webpack Quick Start-Advanced CSS: Eliminate unused CSS
(15). Webpack quick start-add babel support to webpack
(16). Webpack quick start-how to debug after packaging
(17). Webpack quick start-practical skills: development and production parallel settings
(18). Webpack quick start-practical skills: webpack modular configuration
(19). Webpack quick start-practical skills: elegant packaging of third-party libraries
(20). Webpack quick start-practical skills: the correct use of watch, webpack automatically packs
(21). Webpack quick start-practical skills: webpack optimization black skills
(22). Webpack quick start-centralized copy of static resources
(23). Webpack quick start-Json configuration file use
If my content is helpful to you, welcome to give a reward