webpack优化要做哪些方面呢？
开发环境性能优化
- 优化打包构建速度
- 优化代码调试
生产环境性能优化
- 优化打包构建速度
- 优化代码运行性能（提高用户体验）
那么怎么优化呢？
当我们修改样式文件，实际上js文件也被重新打包了。假如项目体积很大，我们修改某一个css文件，那所有的模块都要被重新编译，会导致构建很慢，这个时候我就就要实现改哪个模块的只更新编译对应的模块即可，那么怎么实现呢？
这个时候可以用到HMR，下面我们先来了解一下什么是HMR，有什么作用？
HMR：（hot module replacement） 模块热替换
作用：一个模块发生改变，只会重新打包这一个模块（而不是打包所有模块），提高webpack构建速度
实现：在devServer配置中增加一个hot属性，值为ture，表示开启HMR功能。
devServer: { contentBase: resolve(__dirname, 'build'), port: 3000, open: true, compress: true, hot: true, // 开启HMR功能 }
配置完之后重启服务，发现只修改css文件，打开控制台页面样式更新，并且js文件没有重新加载了，nice!!!
但是我们只实验了css文件支持HMR功能，那么对于html文件、js文件是否也是支持HMR功能呢？
接下来我们来修改html文件，然而页面不刷新内容也没有更新。证明html文件不能使用HMR功能。那么如果想实现修改html文件，页面刷新，应该怎么实现呢？
没事的，办法总会有的~
修改入口配置
entry: ['./src/index.js', './src/index.html'] 设置完之后只要修改html文件，页面会整体刷新（整体模块会重新加载），哇哦，实现了。
那么来探讨一下，html文件到底需不需要HMR功能呢？？？
因为一般项目中的html文件只有一个，里面也没有任何依赖，文件改变了，不可避免的会重新刷新，所以不需要HMR功能。
最后对js文件来进行验证，是否支持HMR功能？？
发现只要一修改js文件，整体模块都会重新加载，明显也是不支持HMR功能。
那么这就有问题了。假如一个项目很大，仅仅只是修改了里面的一个js文件，引起了整体模块的重新构建打包未免有点影响构建速度了，那么怎么实现修改哪一个模块只更新那一个模块呢？
假如入口文件index.js和引入的一个文件print.js如下：
// index.js
import { print } from './print.js';
console.log('js文件被加载了~~~')
print();
// print.js
console.log('print.js文件被加载!!!')
function print () {
const content = 'hello print!!!';
console.log(content);
}
export {print};这个时候可以在入口index.js文件中添加以下代码：
if (module.hot) {
// 一旦module.hot为true，说明开启了HMR功能 --> 让HMR生效
module.hot.accept('./print.js', function () {
// 方法会监听print.js文件的变化，一旦发生变化，其他默认不会重新打包构建，会执行后面的回调函数
print()
})
}注意：HMR功能对js文件来讲,只能处理非入口js文件，因为入口文件只要改变，它所依赖的都会重新编译打包，所以这个是阻止不了的，所以入口文件是不需要HMR功能处理的。可以对入口文件引入的其他依赖做HMR处理
那么最后来总结一下，对于html/js/css文件，HMR应该怎么处理吧~
- 样式文件：可以使用HMR功能，因为style-loader内部实现了HMR功能,会自动的去做。所以我们在开发环境借用style-loader，性能更好，打包速度更快；生产环境需要提取成一个单独的文件，因为上线需要考虑到代码的性能优化。
- js文件： 默认不能使用HMR功能，修改完js代码后，整体模块会重新加载
- html文件：默认不能使用HMR功能
105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
