webpack热模块替换(HMR)/热更新的方法

前端之家收集整理的这篇文章主要介绍了webpack热模块替换(HMR)/热更新的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这是一篇关于webpack热模块替换的最简单的配置(不需要react),也称作热更新。

模块热替换(HMR)的作用是,在应用运行时,无需刷新页面,便能替换、增加删除必要的模块。 HMR 对于那些由单一状态树构成的应用非常有用。因为这些应用的组件是 “dumb” (相对于 “smart”) 的,所以在组件的代码更改后,组件的状态依然能够正确反映应用的最新状态。

webpack-dev-server内置“live reload”,会自动刷新页面

文件目录如下:

  1. app
    1. a.js
    2. component.js
    3. index.js
  2. node_modules
  3. package.json
  4. webpack.config.js

component.js中导入了a.js。index.js导入了component.js。修改任意一个文件,都能达到热更新功能

最重要的是,在index.js中,有这样一段代码:(完成热更新必须需要)

下面是package.json配置:

从依赖就可以看到,这真的是一个最简单的配置了。其中nodemon用来监听webpack.config.js文件的状态,只要发生改变,就重新执行命令。

关于”html-webpack-plugin”,在这里是可以省略的。具体的配置请看:https://www.npmjs.com/package/html-webpack-plugin

在这里,定义了两个命令,一个是start,用于开发环境;一个是build,用于生产环境。--watch用来监听一个或者多个文件,--exec是nodemon用来执行其它的命令。具体的配置请看:https://c9.io/remy/nodemon

接下来是webpack.config.js了,既然package.json的scripts中定义了两种命令,我们还是要在配置文件中实现两种情况(development和production,你也可以修改配置其中一种)。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章