这是一篇关于webpack热模块替换的最简单的配置(不需要反应),也称作热更新。
模块热替换(HMR)的作用是,在应用运行时,无需刷新页面,便能替换,增加,删除必要的模块。HMR对于那些由单一状态树构成的应用非常有用。因为这些应用的组件是“愚蠢的”(相对于“智能”)的,所以在组件的代码更改后,组件的状态依然能够正确反映应用的最新状态。
<强> webpack-dev-server内置“重载”生活,会自动刷新页面。
文件目录如下:
<李>应用程序
<李> a.js李
<李> component.js李
<李> index.js李
李
<李> node_modules李
<李> package.json李
<李> webpack.config.js李
component.js中导入了a.js.index.js导入了component.js。修改任意一个文件,都能达到热更新功能。
最重要的是,在index.js中,有这样一段代码:(完成热更新必须需要)
如果(module.hot) {
module.hot。moduleId,接受(回调);
}
下面是package.json配置:
{
“名称”:“webpack-hmr”,
“版本”:“1.0.0”,
“描述”:“”,
“主要”:“index.js”,
"脚本":{
“开始”:“nodemon——看webpack.config。js - exec \“webpack-dev-server - env发展\””,
“构建”:“webpack——env生产”
}，
“关键词”:[],
“作者”:“”,
“许可证”:“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。
在这里,定义了两个命令,一个是开始,用于开发环境,一个是构建,用于生产环境。——看用来监听一个或者多个文件,- exec是nodemon用来执行其它的命令。具体的配置请看:https://c9.io/remy/nodemon。
接下来是webpack.config.js了,既然package.json的脚本中定义了两种命令,我们还是要在配置文件中实现两种情况(开发和生产,你也可以修改配置其中一种)。
const path=要求(“路径”);
const HtmlWebpackPlugin=要求(“html-webpack-plugin”);
const webpack=要求(“webpack”);={const路径
应用:路径。加入(__dirname,“应用程序”),
构建:路径。加入(__dirname,“构建”),
};
const commonConfig={
条目:{
应用:路径。应用+ '/index.js ',
}，
输出:{
路径:PATHS.build,
文件名:“[名字]. js”,
}，
看:没错,
插件:[
新HtmlWebpackPlugin ({
标题:“Webpack演示”,
}),
),
}
函数developmentConfig () {
常量配置={
devServer: {
historyApiFallback:真的,404年代//回退。/index . html//紧随:真的,使用紧随和热都可以
热点:没错,
统计数据:'错误',//只在发生错误时输出//主机:process.env。主机,这里是未定义的,参考的别人文章有这个//端口:process.env。端口,这里是未定义的,参考的别人文章有这个
覆盖:{//当有编译错误或者警告的时候显示一个全屏叠加
错误:没错,
警告:没错,
}
}，
插件:[
新webpack.HotModuleReplacementPlugin (),
新webpack.NamedModulesPlugin()//更新组件时在控制台输出组件的路径而不是数字ID,用在开发模式//新webpack.HashedModuleIdsPlugin()//用在生产模式
),
};
返回Object.assign (
{},
commonConfig,
配置,
{
插件:commonConfig.plugins.concat (config.plugins),
}
）;
}
模块。出口=函数(env) {
console.log (“env env);
如果env=='发展'){
返回developmentConfig ();
}
返回commonConfig;
};
之前
关于Object.assign,第一个参数是目标对象,如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。浅赋值,对于对象的复制使用=,即引用复制。
env参数通过cli传入。
