1、webpack开发调试必备成果之模块热替换HMR
　　了解热替换:　　
　　　　在改削模块之后，无需重新加载页面，会自动更新页面
　　　　保存在完全更新加载页面时丢掉的应用措施状态
　　　　只更新变换内容，以节省名贵的时间
　　　　调解样式更快捷，几乎相当于在页面调试器中改削样式　　　　

　　配置config文件
　　　　在 devServer: {
　　　　　　hot: true
　　　　　　}
　　配置plugin
　　　　new webpack.NamedModulesPlugin() 当开启HMR的时候使用该插件会显示模块相对路径
　　　　new webpack.HotModuleWordStrmentPlugin()
　　　　在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"
　　　　　　}

初试webpack4--开发使用技巧