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
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
- The code level
- The CSS inline avoids page flashing
- Js statistics dot report related
- Page frame initialization script
- Request level
- To reduce
HTTP
Network requests - Inline images or fonts to reduce the number of resource references
- To reduce
Inline form
js
inlinecss
inlineimage/font
inline
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
- useurl-loaderTurn the file into
base64
In 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