webpack热模块替换(HMR)/热更新的方法
这是一篇关于webpack热模块替换的最简单的配置(不需要react),也称作热更新。
模块热替换(hmr)的作用是,在应用运行时,无需刷新页面,便能替换、增加、删除必要的模块。 hmr 对于那些由单一状态树构成的应用非常有用。因为这些应用的组件是 “dumb” (相对于 “smart”) 的,所以在组件的代码更改后,组件的状态依然能够正确反映应用的最新状态。
webpack-dev-server内置“live reload”,会自动刷新页面。
文件目录如下:
- app
- a.js
- component.js
- index.js
- node_modules
- package.json
- webpack.config.js
component.js中导入了a.js。index.js导入了component.js。修改任意一个文件,都能达到热更新功能。
最重要的是,在index.js中,有这样一段代码:(完成热更新必须需要)
if(module.hot){ module.hot.accept(moduleid, callback); }
下面是package.json配置:
{ "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" } }
从依赖就可以看到,这真的是一个最简单的配置了。其中nodemon用来监听webpack.config.js文件的状态,只要发生改变,就重新执行命令。
关于”html-webpack-plugin”,在这里是可以省略的。具体的配置请看: 。
在这里,定义了两个命令,一个是start,用于开发环境;一个是build,用于生产环境。--watch用来监听一个或者多个文件,--exec是nodemon用来执行其它的命令。具体的配置请看:。
接下来是webpack.config.js了,既然package.json的scripts中定义了两种命令,我们还是要在配置文件中实现两种情况(development和production,你也可以修改配置其中一种)。
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; };
关于object.assign,第一个参数是目标对象,如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。浅赋值,对于对象的复制使用=,即引用复制。
env参数通过cli传入。
然后打开命令行到当前目录,运行npm start或者npm run build就好啦。注意,前者是在开发环境下,是没有输出文件的(在内存),只有运行后者才会有输出文件。
demo的代码在:https://github.com/yuwanlin/webpackhmr
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: C#中正则表达式与回车换行符问题