File processing

Webpack only supports.js. json files. If you need to process other types of files, you need to use loader to parse them

css

The loader version of the CSS must match; otherwise, an error message such as this.getOptions is not function is displayed

npm install css-loader -D

If the CSS needs to be modular packed, webPack cannot resolve the CSS, SCSS, or LESS file types. You need to use the CSS-related Loader to resolve the file types.

You need to install CSS-loader first. If the. SCSS file is used, you need to install Node-sass, sass-loader, and sass-loader. Less files need to be installed with less-loader or less. To further optimize the CSS, you can use postCSS-Loader. Postcss-loader has various functions. Postcss-loader can perform autoprefixer for the CSS and compress CSS files.

loader&plugin

Mini-css-extract-plugin and style-laoder cannot be used together. Mini-css-extract-plugin packages CSS as a file to be imported with an external SRC, while style-loader inserts CSS inline into the DOM

postcss

What PostCSS really does is its plug-ins. Postcss has its own configuration file. You can create a postcss.config.js file to configure the postCSS plug-in.

• Autoprefixer: Added the vendor browser prefix, which uses the data above Can I Use.

  The autoprefixer plug-in takes effect only when the browser range is specified. You can set the overrideBrowserslist property to specify the scope of the browser that needs to take effect. If you do not set this property, You can also define a.browserslistrc file or add the Browserslist attribute to the package.json file to specify the valid browser scope.

• Cssnano: CSsnano is a modular CSS compressor

• Postcss-preset -env: allows you to use future CSS features

mini-css-extract-plugin

This plugin extracts CSS into a separate file, creates a CSS file for each JS file containing CSS, and supports on-demand loading of CSS and SourceMaps, but does not compress CSS. This plug-in is matching a handle CSS loader (MiniCssExtractPlugin. Loader).

If you want to pack your CSS into the same folder in the target directory, you can add a directory name to the name of your CSS by using the mini-CSs-extract-Plugin plugin with the filename attribute.

Image/font files

We can use urL-loader to handle static resources such as images and third-party fonts. Url-loader works in the same way as file-loader (url-loader relies on file-loader), but adds a limit attribute. If the file is smaller than the limit attribute value, a dataUrl is returned. If the file size is larger than the limit, the image is printed

url-loader

Url-loader can customize the name and location of the output image

image-webpack-loader

Image compression, but will affect the speed of packaging. Now Tiny compression sites compress images first or place them on their own CDN

Project optimization

Compressed file volume

css

• Mini-css-extract-pligin extracts CSS to a directory
• PurifyCssPlugin: Delete the unused CSS

// Delete the unused CSS
new PurifyCssPlugin({
  paths: glob.sync(path.join(__dirname, "/*.html")),}),Copy the code

Pictures and other documents

Images are recommended to be compressed using Tiny first to speed up packaging

js

terser-webpack-plugin

Terser-webpack-plugin compresses JS and removes console.log and code comments from JS

optimization: {
    minimize: true.minimizer: [
      new TerserPlugin({
        minify: TerserPlugin.uglifyJsMinify,
        extractComments: true./ / terserOptions attribute will be passed to the TerserPlugin. UglifyJsMinify
        terserOptions: {
          // compress - Compress attribute Settings
          compress: {
            warnings: false.drop_console: true./ / remove the console log
            drop_debugger: true./ / remove the debugger
            pure_funcs: ["console.log"]./ / remove the console},},},],},Copy the code

Speed up packing

speed-measure-webpack-plugin

NPM install speed-measure-webpack-plugin

Speed-measure-webpack-plugin can intuitively measure the time spent by each plugin and loader.

//webpack.config.js 
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); 
const SpeedMeasure = new SpeedMeasurePlugin(); 
const config = { 
    // All webpack configurations
} 
module.exports = SpeedMeasure.wrap(config);
Copy the code

HardSourceWebpackPlugin

npm install hard-source-webpack-plugin -D

Webpack4 requires its own configuration, and webpack5 will have this plug-in built in. HardSourceWebpackPlugin is written to the cache on the first build and can be read from the cache on the second build. Speed up packing

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); 
module.exports = { 
    plugins: [ new HardSourceWebpackPlugin() ] 
}

Copy the code

CopyWebpackPlugin

NPM install copy-webpack-plugin -d

The CopyWebpackPlugin copies a single file or entire directory to the build directory

const CopyPlugin = require('copy-webpack-plugin');
// Copy webpack4 to version 6.2.0
    new CopyPlugin({
      patterns: [{from: path.resolve(__dirname, "./src/static"),
          to: path.resolve(__dirname, "./dist/static"),},]}),Copy the code

Fingerprint strategy

There are three fingerprint policies in Webpack, using the fingerprint policy scenario:

When the project was released, the user’s computer access was the same as before. Or the root cause of js changes that do not take effect is that the browser is still using caching. Browser workflow: If the first visit to ask the server to get files and other data. However, if it is not the first time, the browser will read the file from the local cache. If the file name after the server update is the same as the last one, the browser will read the data from the local cache first. This will cause the site to update but not see the effect. To solve this problem, we need to use WebPack’s fingerprint policy, which follows the file name with one of hash, Chunkhash, or Contenthash

other

progress-bar-webpack-plugin

Shows the progress of packaging