webpack4 热更新

安装好webpack之后

在运行npm run build命令时，到底做了写什么？

1. 首先这个命令会去运行package.json文件里面的scripts脚本
2. scripts脚本首先通过babel把drag编译成.temp临时文文件
3. 第三步是scripts会去执行webpack打包命令，该命令会去查找webpack.config.js配置文件中的entry和output，然后输出一个build/bunble.js文件4
4. 然后就在本地可以打开index.html文件了

• 到了这一步，只完成了一小步，因此如果我修改一个文件，我还需要手动去运行上面的那个命令，然后在刷新浏览器，才能看到更改后的效果，这样开发效率就会大大降低。这时我们需要“热更新”来帮助我们快速开发。

配置热更新

安装webpack-dev-server

cnpm install webpack-dev-server --g
cnpm install webpack-dev-serve --save-dev

配置webpack.config.js文件

//引入webpack
const webpack = require('webpack');
//
 output: {
    publicPath: '/dist',
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'dist/'   //必须加上
devServer: {
    host: 'localhost',
    port: '8080',
    open: true, //自动拉起浏览器
    hot: true, //热加载
    //hotOnly:true
  },
  plugins: [
    //热更新插件
    new webpack.HotModuleReplacementPlugin()
  ],

####### 配置 package.json 文件

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    //加上
    "start": "webpack-dev-server"

项目打包运行：npm run start

这个时候可能会有一片黄色的警告，详情点击：打包后warning