这是一篇关于 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", 在这里是可以省略的. 具体的配置请看: 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
来源: http://www.jb51.net/article/137779.htm