Webpack 5 Getting Started Guide – Development Experience Section

preface

In the actual project development, based on the scaffolding and other tools provided by the framework, we can easily realize the monitoring of file changes, and automatic packaging, after the completion of packaging, open the local service, through the browser to visit the packaged page. The whole process is automatic and does not require manual handling. This paper will separate these processes and complete the introduction and basic use of tool chains involved in each process step by step for the tools involved in each process.

Automatic packaging

Add the –watch parameter to the Webpack command to automatically compile the package.

yarn webpack --watch
Copy the code

When WebPack detects changes in the source file content, it re-executes the packaging command to generate the DIST file.

Automatically refresh

Use BrowserSync. Install and use the following commands:

/ / install browser - sync
yarn add browser-sync dist --files "* * / *"
// Listen for changes to all files in the dist folder
yarn browser-sync dist --files "* * / *"
Copy the code

Automatic packaging + page refresh implementation:

1. Modify source code;
2. Webpack monitors the changes in the code file content and automatically packages it to generate a new DIST package.
3. Listening to the dist folder with browser-sync will trigger the browser page refresh again.

Local development server

DevServer

Webpack’s DevServer automatically integrates automatic packaging and browser refresh.

1. Install development dependencies on Webpack-dev-server in your project.

yarn add webpack-dev-server --dev
Copy the code

2. Start webpack – dev – server

yarn webpack-dev-server
Copy the code

3. Launch and open the browser at the same time

yarn webpack-dev-server --open
Copy the code

PS: When webpack-dev-server starts, the dist folder will be stored in memory. The browser will access the dist folder in memory, so the dist folder will not appear in the root directory of the project.

Static resource access

By default, with webpack-dev-server we access the resources in the dist folder. Not only that, it also supports access to other static resource files.

Add the following configuration to webpack.config.js:

devServer: {
    static: {
      directory: path.join(__dirname, "public"),},compress: true.port: 9000
}
Copy the code

Static is configured with additional static resource access paths. Webpack’s access strategy for static resources is as follows: when the browser accesses the index.html file and there is a file of the same name in the dist folder, the local service returns the HTML file in the Dist file in preference. If different files are accessed, the local server searches for different files with the same name.

Local Proxy service

Wepack enables us to provide proxy services during the development phase, when the project is packaged and deployed in the same source. This proxy service configuration is no longer useful.

devServer: {
    ...
    proxy: {
      "/api/": {
        target: "https://api.github.com".pathRewrite: {
          "^/api": "",},changeOrigin: true,}}},Copy the code

The proxy configuration is described as follows:

• Target: indicates that after an interface URL matches an interface request containing ‘/ API /’, the request will be forwarded to the api.github.com domain name. Rules, after the application interface of the request url will be acting from ‘http://localhost:8088/api/users’ into’ api.github.com/api/users’.
• PathRewrite: If an interface URL starts with ‘/ API’ is matched, the matching part will be replaced with an empty string. The interface URL goes from

https://localhost:8088/api/users’ into ‘api.github.com/users’

• ChangeOrigin: If this parameter is set to true, the host field in the HTTP request will be changed to a non-localhost request IP address. This is because some servers will not respond properly to requests whose host field is localhost.

Devtool set

source map

The Source Map is a mapping between the Source code and the compiled code. When there is a problem with production code, the source map allows us to locate the source code that went wrong.

Add a comment to the compressed JS and specify the source map file path in the comment.

/ / # sourceMappingURL = jquery - 3.4.1 track. Min. The map
Copy the code

Open source Map and add the following configuration to webpack.config.js:

module.exports = {
  ...
  devtool: "source-map". };Copy the code

The eval mode

Javascript code is eval in the browser console, and the context to which the JS execution environment belongs can be specified by sourceURL.

eval('console.log(123) //# sourceURL=./foo/bar.js')
Copy the code

Webpack sets devtool to eval, and after packaging, the source of the error is directly located in the module code for WebPack Mode development.

module.exports = {
  ...
  devtool: "eval". };Copy the code

Configuration items

Webpack offers more than 20 devtool options to choose from. Specific reference: webpack.js.org/configurati… Webpack creates multiple packaging configurations, generating different packaging pages for different devTool options. And add exception code in the source code. After visiting the package page, console error message is reported, and then locate the exception code location.

Webpack. Config. Js is as follows:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

const allModes = [
  "eval"."hidden-cheap-source-map"."hidden-cheap-module-source-map"."hidden-source-map",];module.exports = allModes.map((mode) = > {
  return {
    mode: "none".devtool: mode,
    entry: "./src/main.js".output: {
      filename: `js/${mode}.js`,},module: {
      rules: [{test: /.js$/,
          use: {
            loader: "babel-loader".options: {
              presets: ["@babel/preset-env"],},},},],},plugins: [
      new HtmlWebpackPlugin({
        template: "./src/index.html".filename: path.join(__dirname, `./dist/html/${mode}.html`),})]}; });Copy the code

The configuration items are described as follows:

• Eval mode: Module code is executed in an eval function. You can only locate the file where the module code is located, not the actual location.
• Eval-source-map: Rows and columns that can be located to specific code.
• Cheap -eval-source-map: only specific rows are located, no specific column information is displayed, and the code is transformed by ES6. Empty lines are also removed.
• Cheap-module-eval-source-map: Packaged code will not be processed by loader. This mode is recommended during development.
• Inline-source-map: A packed JS file is imported into a map file as a DataURL file instead of a direct file.
• Hidden-source-map: Source-map file information cannot be viewed in the development tool because it is not referenced in the JS file. This can be used when developing the third party package.
• Nosource-source-map: only the source information can be viewed. The location and content of the source code cannot be seen in the developer tools.

Conclusion:

Configuration items starting with different keywords indicate different types of module code compression configurations.

• Eval – Identifies whether to use EVAL to execute module code
• Cheap: Indicates whether the source-map contains row information
• Module: Whether the source code is available before Loader processing

Usage Scenarios:

• In development mode, use the cheap-module-eval-source-map mode.
• Production mode: Use None and do not generate source-map. Avoid exposing source code where specific source code locations cannot be located.
• Nosource-source-map: code location can be located, but source code content is not visible in developer tools.

HMR(Hot Module Replacement)

Module hot replacement replaces a module in the application in real time without changing the running state of the application. To put it simply, when we make changes to a module, the page only updates the modified module, leaving the other modules unaffected. This way you can avoid the loss of state caused by page refreshes. HMR features are built into front-end frameworks such as Vue or React. The following describes HMR processing for non-front-end frameworks.

Open the HMR

HMR is integrated in webpack-dev-server. You can enable HMR by adding the –hot parameter when running the webpack-dev-server command.

yarn webpack-dev-server --hot
Copy the code

Webpack.config.js adds configuration

const webpack = require("webpack");

module.exports = {
    devServer: {
        hot: true,},plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ]
}
Copy the code

After this configuration is added, modifying the style file does not affect the running state because style-loader already has the HMR handling of the style built in. However, modifying the JS file will still cause the page to refresh automatically. This is where we need to do it manually.

Search bundle.js for “module.hot.accept” to find the keyword:

module.hot.accept(
      / *! !!!!! . /node_modules/css-loader/dist/cjs.js! ./global.css */ "./node_modules/css-loader/dist/cjs.js! ./src/global.css".__WEBPACK_OUTDATED_DEPENDENCIES__= > { /* harmony import */ _node_modules_css_loader_dist_cjs_js_global_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/ *! !!!!! . /node_modules/css-loader/dist/cjs.js! ./global.css */ "./node_modules/css-loader/dist/cjs.js! ./src/global.css");
(function () {
        if(! isEqualLocals(oldLocals, isNamedExport ? _node_modules_css_loader_dist_cjs_js_global_css__WEBPACK_IMPORTED_MODULE_6__ : _node_modules_css_loader_dist_cjs_js_global_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals, isNamedExport)) {
                module.hot.invalidate();

                return;
              } 
Copy the code

Manually handle JS module HMR

Add processing logic to the callback argument of the module.hot.accept function.

let lastEditor = editor;
module.hot.accept("./editor".() = > {
  console.log("editor module updated...", lastEditorText);

  const lastEditorText = editor.innerHTML;
  document.body.removeChild(lastEditor);
  const newEditor = createEditor();
  newEditor.innerHTML = lastEditorText;
  document.body.append(newEditor);
  lastEditor = newEditor;
});
Copy the code

Manual processing of picture module HMR

// Manual image module
module.hot.accept("./editor-wrapper-bg.jpg".() = > {
  img.src = editorWrapperBg;
  console.log("img module updated...");
});
Copy the code

Matters needing attention

• In hot mode, if the HMR code added manually is abnormal, the page is automatically refreshed.
• In only mode, add the configuration and restart the hot mode to solve the problem.

devServer: {    
    hot: "only"
}
Copy the code

conclusion

Nothing to sum up, the above…