This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

Webpack5 hot update packaging

Hot Update refers to Hot Module Replacement, abbreviated as HMR.

Hmr-hot Module Replacement is one of the most useful features webPack provides. It allows various modules to be replaced, added, and removed at run time without the need for a full refresh to reload the entire page

Of course, the main reason for this is to package typescript I wrote, so that I can update js files from time to time after changing TS.

Configuration to prepare

In the previous post, TypeScript From 0: TypeScript Packaging, we talked about how WebPack packages TS files. Do we need to install plug-ins or continue to rely on them

Plug-in:

• typescript
• webpack
• webpack-cli
• ts-loader

This hot update also requires the installation of an additional package, called webpack-dev-server

Installation command: yarn add webpack-dev-server

My versions of these four packages (note here that my WebPack version is already 5) :

"typescript": "^ 4.3.5." "."webpack": "^ 5.48.0"."webpack-cli": "^ 4.7.2." "."webpack-dev-server": "^ 3.11.2"
Copy the code

At this point, you need to create the webpack.config.js file in the root directory, which was already configured in the previous article in this series, but now you need to add more devServer and plugins configurations.

The previous webpack.config.js file

const path = require('path');   
const webpack = require('webpack');
module.exports = {
  entry:'./TypeScript/tsc05.ts'.// Package the entry file, expect to package the entry file. This is the location of tSC05.ts
  output: {filename:'tsc_out.js'.// Output the name of the file
    path:path.resolve(__dirname,'./TypeScript/')  // Get the output path
  },
  mode: 'development'.// The whole mode can not be used, the mode is production environment is compressed good, here configure development environment convenient to see the generated code
  module: {rules: [{
      test: /\.tsx? $/,
      use: 'ts-loader'.exclude: /node_modules/}},resolve: {
    extensions: ['.ts']      // Parse the file format}},Copy the code

Added configuration code within module.exports as follows:

With these configurations of webpack-dev-server, you can change its behavior in a number of ways

devServer: {
    liveReload: true.// liveReload replaces hot for hot
    port: 9000./ / the port number
    filename: 'tsc_out.js'.// Output the name of the file
},
plugins: [
    // Hot update plugin
    new webpack.HotModuleReplacementPlugin()  // Require ('webpack') const webpack = require('webpack');
]
Copy the code

If you haven’t introduced WebPack in webpack.config.js before, you need to do so

const webpack = require('webpack');
Copy the code

After configuring webpack.config.js, add script to the package.json file in the root directory to run the start script

"scripts": {
    "dev": "webpack --mode development",
    "start": "webpack serve --config webpack.config.js --mode development"
}
Copy the code

Note: It is important to note that start is run as webpack serve, not webpack-dev-server

Webpack-dev-server: NPM run start: webpack-dev-server: webpack-dev-server: webpack-dev-server: webpack-dev-server: webpack-dev-server: webpack-dev-server: webpack-dev-server: webpack-dev-server: webpack-dev-server: Cannot find module ‘webpack-cli/bin/config-yargs’

Reference: webpack.docschina.org/configurati…

Running command configuration error:

The configuration succeeds after running the following command:

---

The hard road to configuration

Then begins the more arduous configuration process

Module not found: Error: Can’t resolve Module not found: Error: Can’t resolve Module not found: Error: Can’t resolve

Then I frantically searched for the reason and went to the wrong folder webpack-dev-server\client and found the index.js file. Found errors in require import.

Cause: Require imports are the CommonJS standard, and this is the way it’s mostly found in Node. So you need to configure the target in webpack.config.js

Specific configuration can check website: webpack.docschina.org/configurati…

Building Targets

Webpack can build and compile for multiple environments or targets. Target tells WebPack to specify an environment for the target. The default is “browserslist” or “Web” if no browserslist configuration is found

So set target to ‘node’ and add target: ‘node’ to the webpack.config.js configuration file.

The NPM run start command appears to be running successfully with no errors.

---

Now run the NPM run start command and the following result appears:

Already, tsc_out.js should have been generated in the corresponding TypeScript folder.

However, I did not find the generated JS file, should not be ah. Then quickly investigate the reasons:

graph LR; D0 [Hot update JS file is not generated] -.-> d1[Check the cause] -.-> Whether to generate to another folder -.-> No D1 -

It is found that the hot update command runs successfully, but the compiled file is stored in memory, so the corresponding package file must not be found in the corresponding configuration output location

If you want to generate the corresponding output file after the hot update of the corresponding location, you need to configure the devServer in webpack.config.js by adding the following line: writeToDisk: true

This command will write the resulting file to the hard disk. Write to the directory configured for output.path (writeToDisk)

devServer: {
    progress: false.// The package progress is displayed on the command line
    liveReload: true.port: 9000.filename: 'tsc_out.js'.writeToDisk: true.// Write the generated file to the disk. Write to the directory configured in output.path
  },
Copy the code

In this case, the hot update NPM run start command will generate the corresponding tsc_out.js file

However, while the corresponding tsc_out.js file is automatically changed after each update to TS, there are two more main.xxx.js files after each update is saved

So this situation still needs to be avoided by configuration.

You can pass a function to devServer.writeTodisk to filter which files need to be written to the disk. Use regular expressions to filter the positions of files written to disk

writeToDisk: (filename) = > {
  return /tsc_out.js/.test(filename);
}
Copy the code

Successful effect:

At this point, the compiled JS files that are packaged to generate typescript after hot updates with Webpack are complete

---

conclusion

The hot update packaging process is really stumbling, one turnip after another.

The focus of this article is not really how to package typescript, but how to configure WebPack’s hot update devServer

About how to configure the webpack5 typescript, I found that the club’s official website also has a description: webpack.docschina.org/guides/type…

It took a lot of trouble and errors, but the configuration was finally done