Shulou(Shulou.com)06/02 Report--

Webpack how to use plug-ins and hot update packaging, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Today we will bring you the second article in the introduction to webpack series. If you are not familiar with webpack, you can read the first entry, one-hour introduction to webpack. This article focuses on plug-in usage and hot update packaging, which will involve three knowledge points, all of which are more basic and important. Including: plug-in usage (HtmlWebpackPlugin), file monitoring, hot update packaging. The code related to the tutorial has been uploaded to github (there is an address at the end of the article). You can download it if necessary.

I. usage of the HtmlWebpackPlugin plug-in

Let's first take a look at the concept of plug-ins, here is an explanation of plug-ins on the official website: webpack has a rich plug-in interface (rich plugin interface). Most of the functions of webpack itself use this plug-in interface. This plug-in interface makes webpack extremely flexible. To sum up, plug-ins can contribute to package optimization, resource management, and environmental variable annotations.

To put it bluntly, the so-called plug-in is that I don't have this function myself, but I can open some plug-in interfaces, and then you can develop some plug-ins for whatever function you want, and then connect the plug-ins to webpack to achieve what you want. Browser plug-ins have the same meaning. You can also develop your own plug-in if you like.

Now let's take a look at the plug-in HtmlWebpackPlugin. We have manually created html pages in front of us, and this plug-in can automatically generate basic html pages, which is easy to use.

Here are the steps to use:

Install the plug-in npm install-save-dev html-webpack-plugin

Once installed, you can configure and use it later.

Configuration and u

As shown below, add a HtmlWebpackPlugin constant to the webpack.config.js file, reference the plug-in, and then add the plugins node to the following configuration with the plug-in instance. Plugins represents the plug-in portal, where all plug-ins are configured.

Const HtmlWebpackPlugin = require ('html-webpack-plugin'); module.exports = {entry: {index:'. / src/index.js',}, output: {path: path.join (_ dirname,'dist'), filename: 'index.js'}, mode:' production', plugins: [new HtmlWebpackPlugin ()], module: {rules: [..]}}

Once configured, run npm run build to see how it works.

As a result, a piece of red code came out, and the screenshot is as follows:

I only intercepted part of it, and there are many below. I only look at the top one, and there are a few lines:

ERROR in Error: Child compilation failed: Module build failed (from. / node_modules/babel-loader/lib/index.js):

SyntaxError: e:\ demo\ newwebpack\ section two\ node_modules\ html-webpack-plugin\ default_index.ejs: Unexpected token (1:0)

Take a closer look, there are babel-loader, and html-webpack-plugin, guess that something in the plug-in html conflicts with the babel-loader dependency, this loader is used in the first part of this series of tutorials to parse syntax such as es6. The solution to this problem is to let the project ignore the dependency package when building, as follows, adding exclude: / node_modules/ configuration under the babel-loader configuration means to ignore the dependency package.

{test: /\ .js $/, use: "babel-loader", exclude: / node_modules/}

OK, solve this problem, run npm run build again, and you can see that an index.html file is generated in the dist directory.

In fact, there are related configurations for this plug-in, so we can try it:

New HtmlWebpackPlugin ({title: 'leaningwebpack', filename:' webpack-index.html', favicon: 'webpack.ico'})

Title: sets the title of the generated html file

Filename:html file name, default is index.html

Favicon: set a web page icon

First of all, the configuration will be briefly introduced. For more information, please refer to this article, complete explanation of html-webpack-plugin usage (https://segmentfault.com/a/1190000007294861)).

Since there is no content in the generated html file, some of the styles we have in the first lecture are gone. You can modify the code in the hellowebpack.js file:

Export function hellowebpack () {return 'hellowebpack'}

II. Document monitoring

File monitoring is to automatically rebuild a new output file when it is found that the source code has changed. This is helpful to our development, so that you don't have to change a little bit at a time, you have to run a package, which is a waste of time.

There are two ways to monitor files:

1. "watch": "webpack-watch"

2. Set watch: true in the configuration webpack.config.js

The first way: "scripts": {"test": "echo\" Error: no test specified\ "& & exit 1", "build": "webpack", "watch": "webpack-- watch"}

Add a "webpack-- watch" configuration (alias watch) to the package.json file instead of webpack, and then run npm run watch at build time, and you can see that watch has already started.

Then we modify something in the hellowebpack.js file and find that watch is also tracking the execution. Refresh the browser and you can see the changes.

Export function hellowebpack () {return 'hellowebpack123'}

The second way:

Just add the line watch:true to the configuration root node of the webpack.config.js file.

Then running npm run build can also start snooping.

This method is essentially the same as above, and you have to refresh the browser to see the effect of our changes to the project file. It is actually a poll to determine whether the last editing time of a file has changed. When a file changes, it does not immediately tell the listener, but caches it first and then executes it after the aggregateTimeout time has passed. The watch configuration with listening enabled is listed below, which can be understood by reference.

Module.export = {/ / default false, watchOptions is only valid when watch:true,//watch is enabled: {/ / default is empty, set files or folders that are not monitored, support regular matching ignored: / node_modules/,//, wait for 300ms to execute after listening to changes, default 300ms aggregateTimeout:300, / / set polling file change time, ask poll:1000 1000 times per second}}

So the question is, is it possible to update browsers without manually refreshing them? There's a way. Here comes the hot update.

III. Hot renewal

Hot update means that you can modify the code in the editor and see the synchronous update effect on the browser at the same time. Doesn't that sound amazing? Let's look at the steps:

Wds does not refresh the browser

Wds is the abbreviation of webpack-dev-server. Compared with the method of file monitoring watch mentioned earlier, this scheme does not output the file itself, but puts it in memory, which has better performance. This solution uses the HotModuleReplacementPlugin plug-in, which is a built-in plug-in for webpack. Let's look at the steps:

Install npm I webpack-dev-server-D

Install the webpack-dev-server dependencies that you will use later, and then add the configuration and you can use it.

Configuration and u

Add configuration in package.json

"dev": "webpack-dev-server-open"

Then add the configuration to webpack.config.js, declaring a constant webpack first

Const webpack = require ('webpack')

Add another plug-in to the array under the plugins node

New webpack.HotModuleReplacementPlugin ()

Finally, add a devServer configuration at the same level as plugins, where contentBase indicates that the hot update package is aimed at the contents of the dist file, and hot:true indicates that the hot update status is enabled.

DevServer: {contentBase:'. / dist', hot: true}

Overall, the configuration of webpack.config.js looks like this:

Once configured, let's experience the effect and run

Npm run dev

You will see that it executes the command webpack-dev-server-- open. If you see a page like this, it means that you are opening a list of files in the dist directory.

Select your html page and let's try the hot update effect. Modify content in hellowebpack.js file

Export function hellowebpack () {return 'hellowebpack12345'}

Save the document, and then immediately look at the browser, you will find that the page will automatically refresh to show the latest content, the hot update effect has been achieved.

After reading the above, have you mastered how to use plug-ins and hot update packages in webpack? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.