My wechat public account: Road of Cultivation in front, welcome to follow.

A few days ago friends dinner suddenly thought, in less than half a year, the first group of 20 will be born. The feeling is that the generation born in the 1990s now looks at the generation born in the 1960s. We, the generation born in the 1990s, become the generation born in the last century in the eyes of the generation born in the 20th century. O (╯ / ╰) o

It’s time to wrap up the Webpack series with a process you’ve used yourself.

CSS optimization

I’ve found in my projects that sometimes CSS is duplicated, or I don’t know who wrote CSS styles that aren’t used at all. If the file is small, the impact is not significant. But I had a project where I found over 9000 lines of CSS!

If the file is small, I have the opportunity to search line by line and remove the extra code. Unfortunately, the document is too much. Fortunately, I found a Webpack plug-in mini-CSS-extract-Plugin, which combined with PurifyCSs-WebPack can meet my needs, and give the function to Webpack to do.

mini-css-extract-plugin

The mini-CSS-extract-plugin plugin allows you to see more configuration options in Webpack Plugins. I’ll just use the simplest configuration items for now.

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

plugins: [
    new MiniCssExtractPlugin({          // The CSS file is removed
        filename: 'css/[name].min.css'.// Specify the name of the file after extraction and under the CSS path
        chunkFilename: 'css/[id].min.css',})],module: {
    rules: [{test: /\.css$/.// Since there is only CSS code in my project, the re only writes CSS
            use: [
                {
                    loader: MiniCssExtractPlugin.loader, // Specify the use of mimi-css-extract-plugin
                    options: {
                        publicPath: '.. / '.hmr: process.env.NODE_ENV === 'development'.// Enable HMR only in the development environment}},'css-loader'./ / use CSS - loader]],}}Copy the code

purifycss-webpack

The purifyCSs-Webpack plugin can be found on the NPM website for more configuration items.

Note: If you open the NPM specification for purifyCSs-webpack, you will be prompted to use the extract-text-webpack-plugin, and the sample code is also demonstrated using this plugin. But the plugin is obsolete. The recommended use of the mini-CSs-extract-plugin is the one above.

const glob = require('glob');	// The plugin glob-all must be installed instead of glob
const PurifyCSSPlugin = require('purifycss-webpack');

new PurifyCSSPlugin({       // The CSS file is deduplicated
    paths: glob.sync(path.join(__dirname, 'index.html')) // Specify the HTML page, or use the wildcard * to match all HTML
})
Copy the code

Purifycss-webpack and Mini-CSs-extract-Plugin are used together to achieve CSS de-duplication.

optimize-css-assets-webpack-plugin

After the de-implementation, the file has been reduced a lot, but I am not satisfied. Because I want to use compressed CSS online to further reduce file size and save user traffic. The MiniCssExtractPlugin plugin refers to a plugin that uses compressed CSS and JS in the build environment.

So I’m just going to use it.

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');

 optimization: {
     minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],   // js compression and CSS compression
 }
Copy the code

Image optimization

url-loader

After CSS is extracted and compressed, further optimization can be found. Small ICONS and logos are commonly used on websites, some of which are Sprite and some of which are not. Later, through a search, I found that I could actually make some small ICONS small enough to be base64 and write them to CSS files to reduce the number of HTTP requests. If you do this manually, it’s a tedious process. Fortunately, the url-loader plugin was found. See WebPack Loaders for plug-in configuration details

module: {
        rules: [{test: /\.(png|jpe? g|gif|svg)$/i.// Match the image file type
                use: [
                    {
                        loader: 'url-loader'.options: {
                            limit: 1024.// Create base64 images for images below 1024
                            name: '[name].[ext]'.outputPath: 'img/'.publicPath: '.. /img/'   // After this address is specified, background in the CSS will become base64~ and the path will use this path},}]}Copy the code

To be sure, I revised the following regular / \. (PNG |, jpe.” G | | GIF SVG) $/ I, it can be matched to the JPG and jpeg. In addition, you need to specify the limit parameter, which means that only the images below the limit value will be base64 encoded, and those above the limit value will not be processed.

In this process, the problem is that if the image does not have Base64, the URL referenced in the background image will be incorrect, resulting in the image reference failure. After debugging, it is found that if you specify options.publicPath, you can reference it correctly.

image-webpack-loader

After processing the small icon, I thought I needed to process the large image. Because if you only deal with small ICONS, the impact doesn’t seem to be that big. What really accounts for traffic is the picture. In fact, during the project, PNG images will be compressed again. But I used to use online tools. Now I want to automate this using a packaging tool.

Image-webpack-loader can compress PNG, JPEG, GIF, webP, SVG. You can specify the compression quality for different types of images.

                    {
                        loader: 'image-webpack-loader'.options: {
                            mozjpeg: {
                                progressive: true.quality: 65
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false,},pngquant: {
                                quality: '65-90'.speed: 4
                            },
                            gifsicle: {
                                interlaced: false,},// the webp option will enable WEBP
                            webp: {
                                quality: 75}}}Copy the code

After using this plugin, I did notice that my images had shrunk considerably.

The entire configuration

The above is a simple list of the various loaders and plugins that need to be used. The complete webpack-config.js code is as follows:

const path = require('path');
const glob = require('glob');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');

module.exports = {
    mode: 'production'.entry: {
        style: './js/style.js',},optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],   / / CSS compression
    },
    plugins: [
        new CleanWebpackPlugin(),               // Clear the file
        new MiniCssExtractPlugin({          // The CSS file is removed
            filename: 'css/[name].min.css'.chunkFilename: 'css/[id].min.css',}).new PurifyCSSPlugin({       // The CSS file is deduplicated
            paths: glob.sync(path.join(__dirname, 'index.html')),})],module: {
        rules: [{test: /\.css$/.use: [{loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '.. / '.hmr: process.env.NODE_ENV === 'development',}},'css-loader',]}, {test: /\.(png|jpe? g|gif|svg)$/i.use: [{loader: 'url-loader'.options: {
                            limit: 1024.name: '[name].[ext]'.outputPath: 'img/'.publicPath: '.. /img/'   // After this address is specified, background in the CSS will become base64~ and the path will use this path}, {},loader: 'image-webpack-loader'.options: {
                            mozjpeg: {
                                progressive: true.quality: 65
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false,},pngquant: {
                                quality: '65-90'.speed: 4
                            },
                            gifsicle: {
                                interlaced: false,},// the webp option will enable WEBP
                            webp: {
                                quality: 75}}}],}],},output: {
        filename: '[name].min.js'.path: path.resolve(__dirname, './dist')}};Copy the code
  • Of the fileentryThe entrance isstyle.js.
  • All package file directories are throughoutput.pathSpecified, the output is theredistDirectory.
  • In the configurationloader, you can configure multiple re matches under one re matchloader. Let’s say I configured it firsturl-loader, and then configuredimage-webpack-loader.

In the style.js entry file, you don’t really do anything but introduce the CSS files you need to use. The code is as follows:

import style from '.. /css/style.css';
Copy the code

So the process is that style.js introduces style.css, and webpack processes it to generate style.min.js and style.min.css.

The overall project structure is as follows:

This is one example of my use of WebPack in a project. That’s the end of the introductory notes for now.

(after)

Related articles

Introduction to Webpack Learning Notes (1)

Introduction to Webpack Learning Notes (2)

Introduction to Webpack Learning Notes (3)

Introduction to Webpack Learning Notes (4)