webpack php热替换,webpack的热模块替换HMR/热更新的具体步奏

这次给大家带来webpack的热模块替换HMR/热更新的具体步奏，webpack热模块替换HMR/热更新的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

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

文件目录如下：appa.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”，在这里是可以省略的。具体的配置请看：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 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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：