1、webpack开发调试必备功能之模块热替换HMR
了解热替换:
在修改模块之后，无需从新加载页面，会自动更新页面
保留在完全更新加载页面时丢失的应用程序状态
只更新变更内容，以节省宝贵的时间
调整样式更快捷，几乎相当于在页面调试器中修改样式
配置config文件
在 devServer: {
hot: true
}
配置plugin
new webpack.NamedModulesPlugin() 当开启HMR的时候使用该插件会显示模块相对路径
new webpack.HotModuleReplacementPlugin()
在devServer中加入hotOnly表示只有热更新,不会自动刷新页面
hotOnly: true
需要手动添加代码告诉webpack接受更新的模块
if (module.hot) {
module.hot.accept()
}
2、区分生产环境和开发环境的配置
了解:
开发环境和生产环境的构建目标差异很大,在开发环境中,我们需要具有强大的，具有实时重新加载或热模块替换能力和localhost sever。而在生产环境中，我们的目标则转向于关注更小的bundle,以及资源的优化,以改善加载时间。所以我们通常建议为每个环境编写彼此独立的webpack配置
安装
npm install --save-dev webpack-merge
拆分文件:
在这里我们可以将webpack.config.js拆分为三个文件,分别是webpack.common.config.js 、 webpack.dev.config.js 和 webpack.prod.conf.js
webpack.common.config.js 是放入一些我们公用的配置,比如 entry,出口output、常用loader以及插件
webpack.dev.config.js 是在开发环境上的配置，比如devServer配置,热替换等方便开发的配置
webpack.prod.conf.js 是在生产环境上的配置，比如分离CSS、压缩CSS和JS等
在webpack.dev.config.js、webpack.prod.conf.js中引入webpack.common.config.js
const merge = require('webpack-merge')
const common = require('./webpack.common.conf.js')
modules.exports = merge(common, {
配置
})
修改package.json中的script
{
"dev": webpack --mode development --config ./config/webpack.dev.config.js"
"prod": webpack --mode development --config ./config/webpack.prod.config.js"
}