I have learned webpack3 knowledge before, but there are still many changes after webpack4 upgrade, so THIS time I reorganize the knowledge point of Webpack4 for convenience of review in the future.

This study of Webpack 4 not only requires the ability to configure, remember the core API, it is better to understand the deeper knowledge of Webpack, such as packaging principle and so on, so I may omit some basic content, but I hope I can master Webpack through this study, so as to better deal with the future work.

Now we always repack by NPX webpack or by configuring package.json. Is there a way to listen for JS changes and automatically pack? The answer is yes, so let’s try configuring automatic packaging.

1. –watch

We can configure commands in the scripts of package.json for NPX webpack purposes. Then, after the command, add a –watch.

So WebPack will listen to the packaged files for us and automatically repackage them whenever they change.

But if we want to run the command, automatically help us open the browser, can simulate the features of the server, we need webpackDevServer.

2.webpackDevServer

First, install webpackDevServer(CNPM install webpack-dev-server -d) and then configure devServer in webpack.config.js.

2.1 contentBase

ContentBase refers to the folder in which the server is started.

Then write a script in package.json followed by -dev-server.

Every time a file changes, WebPack will automatically sense the change and help us restart the server, and in this way, WebPack will automatically refresh the browser for us and improve development efficiency.

2.2 the open

In devServer, we can add an open: true property so that WebPack will automatically open the browser for us and automatically access the server startup address.

Why start the server? Because if you want to send ajax requests, you can’t send them through file, you need to send them through HTTP, so you need to start a server.

2.3 the proxy

In Vue, cross-domain can be set up through proxies in devServer, also because devServer can solve cross-domain through forwarding.

2.4 the port

The default port number is 8080. We can change the port number by changing port.

Of course, devServer’s configuration items are much more than that, so you can refer to the official documentation and configure them as needed in your project.

3. Implement devServer functions by yourself

In the early days of webpackDevServer, many frameworks implemented a set of functionality to start the server themselves. Let’s also implement a simple devServer.

We use Node’s Express and Webpack’s middleware, Webpack-dev-middleware, so install Express and Webpack-dev-middleware first.

Create server.js in the webpack.config.js directory and add a command to package.json.

In webpack.config.js, output adds a configuration item, publicPath: ‘/’, changes the paths of all packaged resources to the root path, and then starts writing server.js.

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware'); // add middleware const config = require('./webpack.config.js'); // Introduce webpack.config.js const compiler = webpack(config); // Create a server instance const app = express(); /* * Compiler will run again whenever the file changes, Use (webpackDevMiddleware(Compiler, {publicPath: config.output.publicPath })) app.listen(3000, () => { console.log('server is running');
})
Copy the code

Then run NPM run self in the console, open localhost:3000, and we can try and refresh the page every time we modify the source code to see the effect of the modification.