webpack plugins

In this section, we will learn webpack webpack . Plugins allow 060f425db6084b to perform more tasks, from optimization and compression to redefining variables in the environment, which is very powerful.

In webpack , Plugin and loader are two more confusing concepts. loader used to convert the source code of the module, so loader is a single source file. The purpose of the plug-in is to solve loader cannot achieve, so the function of the plug-in is more powerful, and the execution level of the plug-in is the entire construction process.

In the previous section, when we studied loader , we can find that there is no need to quote when loader When using the plug-in, we must first reference the plug-in require webpack has a wealth of built-in plug-ins and external plug-ins, and allows users to customize plug-ins.

Install plugin

For example, we take the plug-in html-webpack-plugin , which is often used in practical applications, as an example to talk about the specific use of the plug-in. html-webpack-plugin plug-in can be used to automatically generate basic HTML pages.

First of all, we need to install the html-webpack-plugin plug-in first, the command is as follows:

npm install html-webpack-plugin --save-dev

After installation, the plug-in will be automatically added to package.json file, and the version of the plug-in will be specified, as shown below:

"devDependencies": {
    "css-loader": "^3.6.0",
    "html-webpack-plugin": "^4.3.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.11.0"
}

Configure plugin

After the plug-in is installed, we introduce this plug- webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引用外部插件

Then add the plugins node to the configuration, and add this plug-in instance, plugins represents the plug-in entry, and all plug-ins are configured here.

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引用外部插件
module.exports = {
    entry: {
        entry:'./index.js',
    },
    output: {
        path:__dirname + '/dist',
        filename:'./bundle.js'
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:['style-loader','css-loader']
            }]
    },
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

After configuration, you can execute the npm run build command. At this time, index.html file will be automatically generated dist index.html is the default file name.

We can also configure related properties in the plug-in, for example:

new HtmlWebpackPlugin({
    title: 'webpack的入门学习',
    filename: 'new_test.html'
})

In this way new_test.html will be generated in the dist directory, and the title of the HTML file is "Webpack's Introductory Learning".

html-webpack-plugin plug-in attributes:

• title : Generate the title of the HTML file.
• filename : The file name of the output HTML.
• template : The file path where the HTML template is located.
• inject : injection option, optional values are true , body , head , false .
• favicon : Set a web icon.
• minify : Compress HTML files, the attribute value is a compression option or false .

Common plugins

webpack , here are some commonly used plug-ins, let’s take a look:

• extract-text-webpack-plugin : Generate css file instead of inline. The main purpose of this plug-in is to extract the css style and prevent the page style loading disorder caused by js
• DefinePlugin : Define global constant plug-ins. We can use these variables directly in the module without any declaration. DefinePlugin is the plug-in that comes with webpack
• EnvironmentPlugin : Define the environment variable plug-in.
• BannerPlugin : Add copyright comments and so on in the code.
• HotModuleReplacementPlugin : Module hot update plug-in, turn on the module hot replacement function, by monitoring file changes and automatically loading the modified files to reduce the annoying browser manual reloading.
• ProgressPlugin : Build progress plugin.
• ProvidePlugin : Automatically load the module, for example, when $ appears, it will load common libraries such as jQuery.
• IgnorePlugin : Used to ignore some files.

Link: https://www.9xkd.com/