How webpack implements hot module replacement
This time I will show you how webpack implements hot module replacement, and what are the precautions for webpack to implement hot module replacement. The following is a practical case, let's take a look.
The function of hot module replacement (HMR) is to replace, add, and delete necessary modules without refreshing the page when the application is running. HMR is useful for applications that consist of a single state tree. Because the components of these applications are "dumb" (as opposed to "smart"), after the component's code changes, the state of the component can still correctly reflect the latest state of the application.
webpack-dev-server has built-in "live reload", which will automatically refresh the page.
The file directory is as follows:
app
- ##a.js
- component.js
- index.js
- node_modules
- package.json
- webpack.config.js ##a.js is imported into component.js. index.js imports component.js. Modifying any file can achieve the hot update function.
The most important thing is that in index.js, there is such a piece of code: (Required to complete hot update)
if(module.hot){
module.hot.accept(moduleId, callback);
}The following is the package.json configuration:
{
"name": "webpack-hmr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --env development\"",
"build": "webpack --env production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^2.28.0",
"nodemon": "^1.11.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
}As you can see from the dependencies, this is really the simplest configuration. Among them, nodemon is used to monitor the status of the webpack.config.js file. As long as there is a change, the command will be re-executed.
Regarding "html-webpack-plugin", it can be omitted here. For specific configuration, please see:
https://www.npmjs.com/package/html-webpack-plugin. Here, two commands are defined, one is start, used in the development environment; the other is build, used in the production environment. --watch is used to monitor one or more files, and --exec is used by nodemon to execute other commands. For specific configuration, please see: https://c9.io/remy/nodemon.
The next step is webpack.config.js. Since two commands are defined in the scripts of package.json, we still have to implement two situations (development and production) in the
config file , you can also modify the configuration of one of them). const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const PATHS = {
app: path.join(dirname, 'app'),
build: path.join(dirname, 'build'),
};
const commonConfig={
entry: {
app: PATHS.app + '/index.js',
},
output: {
path: PATHS.build,
filename: '[name].js',
},
watch: true,
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack demo',
}),
],
}
function developmentConfig(){
const config ={
devServer:{
historyApiFallback:true, //404s fallback to ./index.html
// hotOnly:true, 使用hotOnly和hot都可以
hot: true,
stats:'errors-only', //只在发生错误时输出
// host:process.env.Host, 这里是undefined，参考的别人文章有这个
// port:process.env.PORT, 这里是undefined，参考的别人文章有这个
overlay:{ //当有编译错误或者警告的时候显示一个全屏overlay
errors:true,
warnings:true,
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // 更新组件时在控制台输出组件的路径而不是数字ID，用在开发模式
// new webpack.HashedModuleIdsPlugin(), // 用在生产模式
],
};
return Object.assign(
{},
commonConfig,
config,
{
plugins: commonConfig.plugins.concat(config.plugins),
}
);
}
module.exports = function(env){
console.log("env",env);
if(env=='development'){
return developmentConfig();
}
return commonConfig;
};
copy. The env parameter is passed in through cli.
Then open the command line to the current directory and run npm start or npm run build. Note that the former is in the development environment and has no output file (in memory). Only when the latter is run will there be an output file.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Mint-ui usage steps detailed explanationWhat are the properties of JS to determine whether there is a scroll bar on the page? Six commonly used JS sorting algorithms and comparisonThe above is the detailed content of How webpack implements hot module replacement. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Master PyCharm replacement shortcut keys in 5 minutes and easily increase your programming speed!
Feb 22, 2024 am 10:57 AM
PyCharm is a commonly used Python integrated development environment with rich functions and shortcut keys that can help developers improve programming efficiency. In the daily programming process, mastering PyCharm's shortcut key replacement skills can help developers complete tasks more quickly. This article will introduce you to some commonly used replacement shortcut keys in PyCharm to help you easily improve your programming speed. 1.Ctrl+R replacement In PyCharm, you can use the Ctrl+R shortcut key to perform replacement operations.
Replace the class name of an element using jQuery
Feb 24, 2024 pm 11:03 PM
jQuery is a classic JavaScript library that is widely used in web development. It simplifies operations such as handling events, manipulating DOM elements, and performing animations on web pages. When using jQuery, you often encounter situations where you need to replace the class name of an element. This article will introduce some practical methods and specific code examples. 1. Use the removeClass() and addClass() methods jQuery provides the removeClass() method for deletion
What are web standards?
Oct 18, 2023 pm 05:24 PM
Web standards are a set of specifications and guidelines developed by W3C and other related organizations. It includes standardization of HTML, CSS, JavaScript, DOM, Web accessibility and performance optimization. By following these standards, the compatibility of pages can be improved. , accessibility, maintainability and performance. The goal of web standards is to enable web content to be displayed and interacted consistently on different platforms, browsers and devices, providing better user experience and development efficiency.
PyCharm Beginner's Guide: Comprehensive Analysis of Replacement Functions
Feb 25, 2024 am 11:15 AM
PyCharm is a powerful Python integrated development environment with rich functions and tools that can greatly improve development efficiency. Among them, the replacement function is one of the functions frequently used in the development process, which can help developers quickly modify the code and improve the code quality. This article will introduce PyCharm's replacement function in detail, combined with specific code examples, to help novices better master and use this function. Introduction to the replacement function PyCharm's replacement function can help developers quickly replace specified text in the code
How to enable administrative access from the cockpit web UI
Mar 20, 2024 pm 06:56 PM
Cockpit is a web-based graphical interface for Linux servers. It is mainly intended to make managing Linux servers easier for new/expert users. In this article, we will discuss Cockpit access modes and how to switch administrative access to Cockpit from CockpitWebUI. Content Topics: Cockpit Entry Modes Finding the Current Cockpit Access Mode Enable Administrative Access for Cockpit from CockpitWebUI Disabling Administrative Access for Cockpit from CockpitWebUI Conclusion Cockpit Entry Modes The cockpit has two access modes: Restricted Access: This is the default for the cockpit access mode. In this access mode you cannot access the web user from the cockpit
PyCharm replaces shortcut keys to make programming more convenient!
Feb 21, 2024 pm 12:03 PM
PyCharm is an integrated development environment popular among programmers. It provides powerful functions and tools to make programming more efficient and convenient. In PyCharm, reasonable setting and replacement of shortcut keys is one of the keys to improving programming efficiency. This article will introduce how to replace shortcut keys in PyCharm to make programming more convenient. 1. Why should we replace shortcut keys? In PyCharm, shortcut keys can help programmers quickly complete various operations and improve programming efficiency. However, everyone has different habits, and some people may
what does web mean
Jan 09, 2024 pm 04:50 PM
The web is a global wide area network, also known as the World Wide Web, which is an application form of the Internet. The Web is an information system based on hypertext and hypermedia, which allows users to browse and obtain information by jumping between different web pages through hyperlinks. The basis of the Web is the Internet, which uses unified and standardized protocols and languages to enable data exchange and information sharing between different computers.
How to replace a word in Excel using Python?
Sep 16, 2023 pm 10:21 PM
In Python, we can replace one word with another word in Excel using a third-party Python library called openpyxl. Microsoft Excel is a useful tool for managing and analyzing data. Using Python, we can automate some Excel data management tasks. In this article, we will learn how to replace a word in Excel using Python. Before installing openpyxl to replace Word in Excel, we need to install the openpyxl library in the system using the Python package manager. To install openpyxl, enter the following command in the terminal or command prompt. Pipinst
