Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "what is the role of webpack Plugin", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what is the role of webpack Plugin" article.

I. the role of pulgin

Pulgin means "plug-in". The main purpose is to solve things that cannot be achieved by loader. Loader is only used to transform specific modules, while pulgin can be used to perform a wider range of tasks, such as packaging optimization, resource management, environment variable injection, etc.

Pulgin runs through the entire compilation cycle of webpack and runs at different stages of webpack (hook / lifecycle)

II. Pulgin configuration mode

In general, the configuration of pulgin is to export the plugins attribute in the object through the webpack.config.js configuration file and pass it to the new instance object

Const HtmlWebpackPlugin = require ('html-webpack-plugin'); / / install const webpack = require (' webpack') via npm; / / access the built-in plug-in module.exports = {... / configure plugins plugins: [new webpack.ProgressPlugin (), new HtmlWebpackPlugin ({template:'. / src/index.html'}),],}; III. The nature of pulgin

Pulgin is essentially a javascript object with an apply method, and his apply method is called by the webpack compiler phase, and the compiler object is accessible throughout the compilation life cycle.

Const pluginName = 'ConsoleLogOnBuildWebpackPlugin';class ConsoleLogOnBuildWebpackPlugin {apply (compiler) {compiler.hooks.run.tap (pluginName, (compilation) = > {console.log (' webpack construction process begins!') ;);}} module.exports = ConsoleLogOnBuildWebpackPlugin

About the entire compilation lifecycle hook:

Entry-option: initialize option

Run

Compile: the compilation that really starts, before creating the compilation object

Compilation: the compilation object is generated

Make recursively analyzes dependencies from entry and is ready to build each module.

After-compile: end of compiling build process

Emit: before writing the assets contents in memory to the disk folder

After-emit: after writing the assets contents in memory to the disk folder

Done: complete all compilation processes

Failed: when compilation fails

4. Common pulgin4-1 html-webpack-plugin

Function:

Use HtmlWebpackPlugin plug-in to automatically generate html file, and make an introduction to the packaged js file

The HtmlWebpackPlugin principle is generated by the default ejs template. Of course, you can also customize the template. In the html template, you can get the configuration value in a way.

/ / webpack.config.jsconst HtmlWebpackPlugin = require ("html-webpack-plugin"); module.exports = {. Plugins: [new HtmlWebpackPlugin ({title: "webpack case", template: ". / public/index.html", / / specify the generated html template}),]}; 4-2 clean-webpack-plugin

Function: the CleanWebpackPlugin plug-in automatically deletes the last package each time it is packaged

Const {CleanWebpackPlugin} = require ('clean-webpack-plugin'); module.exports = {... Plugins: [new CleanWebpackPlugin ()]} 4-3 mini-css-extract-plugin

Purpose: extract CSS into a separate file

Const MiniCssExtractPlugin = require ('mini-css-extract-plugin') Module.exports = {..., module: {rules: [{test: / .s [ac] ss$/, use: [{loader: MiniCssExtractPlugin.loader}, 'css-loader',' sass-loader']}}, plugins: [..., new MiniCssExtractPlugin ({filename:'[name] .css'}) 4-4 DefinePlugin

Purpose: DefinePlugin allows global constants of the configuration to be created at compile time and is a built-in plug-in for webpack (no separate installation is required)

Const {DefinePlugun} = require ('webpack') module.exports = {... Plugins: [new DefinePlugin ({BASE_URL:'"/" / / equivalent to const BASE_URL = ". /" his assignment is a little weird}),]}

When you compile the template module, you can get the global object in the following form

4-5 copy-webpack-plugin

Function: CopyWebpackPlugin is a plug-in to copy files, copy files or directories to specified areas, such as vue packaging process, if we put some files into the public directory, then this directory will be copied to the dist folder

New CopyWebpackPlugin ({/ / copy the files in public to the packaged folder through the CopyWebpackPlugin plug-in / / patterns is a match patterns: [{from: "public", / / set from which source to start copying to: "build" / / can be omitted The default is the path copied to the package output, and some additional options will be set according to output globOptions: {ignore: ['* / DS_Store','* * / index.html','* * / abc.txt'] / / * * represents the folder of from} / / globOptions: You can write files that need to be ignored, such as a file automatically generated under the .DS _ Store:mac directory. .index.html: there is no need to copy, because we have completed the generation of index.html through HtmlWebpackPlugin}]}) the above is about "what is the function of webpack Plugin"? I believe you all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.