A list of commonly used WebPack plug-ins

This article gives you a deeper understanding of WebPack through several examples of how common WebPack plug-ins work and how to use them.

Note: This article is based on webPack 4.x experiments.

In order to facilitate the demonstration and verification, we first need to set up a set of experimental environment and install the dependent toolkit with the following command:

Install webpack and webpack- CLI
$ npm i webpack webpack-cli -D
Copy the code

Webpack is a module wrapper that can package resources as javascript resources; Webpack-cli is a command line interface of WebPack. You can read configuration files through the command line to facilitate developers.

Note: in NPM, -d is shorthand for –save-dev, and similar common abbreviations such as -s are shorthand for –save.

1. Clear the output directory

The dist directory is usually cleared before the project is packaged to avoid generating duplicate artifacts. The most direct and rude way is to clear through the shell command rm -rf dist. Although it is simple to use, the disadvantage is that errors will be reported on Windows platform, and there are incompatibilities, because the command line in Windows does not support the RM command. So we recommend using the WebPack plug-in here to achieve the effect of clearing the dist directory.

First you need to install the clean-webpack-plugin:

# installation
$ npm i clean-webpack-plugin -D
Copy the code

Then you need to configure:

// webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
/ / use
plugins: [
    new CleanWebpackPlugin()
]
Copy the code

There is also a tool called Rimraf, a Node.js toolkit for performing deep deletes, similar to the shell command rm -rf , which interested people can try.

2. Copy public resources

# installation
$ npm install --save-dev copy-webpack-plugin
Copy the code

www.webpackjs.com/plugins/cop…

3. html-webpack-plugin

Github.com/jantimon/ht…

First you need to install the dependencies:

# installation
$ npm install --save-dev html-webpack-plugin
$ npm install --save-dev html-webpack-inline-source-plugin
Copy the code

Then you need to configure:

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
/ / use
plugins: [
    new HtmlWebpackPlugin({
      title: 'My App'.template: './index.html'}),]Copy the code

4. webpack-dev-server

Github.com/webpack/web…

Webpack-dev-server provides a simple Web server during development and can live reloading. The internal one is webpack-dev-Middleware, which provides super-fast memory-level access to webPack resources.

The installation

$ npm i webpack-dev-server --save-dev
Copy the code
// webpack.config.js
devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true.port: 9000
},
Copy the code

Because webPack’s resources are compiled at the memory level and not written to disk, you can’t see where the resources are actually stored. But by the following address can access to the path in the memory: http://localhost:9000/webpack-dev-server. Sometimes it’s useful to analyze resource files.

You can also write files to disk using devserver. writeToDisk: true or write-file-webpack-plugin.

5. How to inline static resources

What is resource inlining?

Inline-resource is the embedding of a resource inline into another resource.

Advantages of resource inlining

  1. The code level
    • The CSS inline avoids page flashing
    • Js statistics dot report related
    • Page frame initialization script
  2. Request level
    • To reduceHTTPNetwork requests
    • Inline images or fonts to reduce the number of resource references

Inline form

  1. jsinline
  2. cssinline
  3. image/fontinline

Take a chestnut

1) Use raw-Loader to inline lib-flexible. Js

A loader for webpack that allows importing files as a String

Raw-loader is used to import resources as strings.

// Import HTML as a string< % =require('raw-loader! ./meta.html').default %>

/ / import CSS
<style><%= require('! raw-loader! ./style.css').default %></style>

/ / import js
<script>
    // https://github.com/webpack-contrib/raw-loader/issues/72< % =require('! raw-loader! ./node_modules/lib-flexible/flexible.js').default %>
</script>
Copy the code
  1. useurl-loaderTurn the file intobase64In the form ofURI.

6. Extract the CSS separately

The mini-css-extract-plugin allows you to extract your CSS into a separate CSS file.

The installation

$ npm install --save-dev mini-css-extract-plugin
Copy the code

configuration

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [{test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],},],},};Copy the code

The effect

To be continued