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"
- }
来源: http://www.bubuko.com/infodetail-3357179.html