webpack: webpack-dev-server 页面自动刷新

注意：本进阶在webpack进阶 【11】的基础上进行衍生。

一、为什么需要自动刷新

答：由前面的11个进阶的操作可以看到，我们每改一处，都需要进行 打包脚本后才能看到效果。太麻烦啦。开发太累了。由此我们急迫需要改动一处，页面就能实时更新。这时候 【webapck-dev-server】 就用到作用了。

二、下载 webapck-dev-server

cnpm i webpack-dev-server

三、webpack.config.js 中配置

module.exports = {
    ...
    // 6. 配置开发服务器，代码变化，自动刷新
    devServer: {
        // 浏览器网址上显示的端口号
        port: 3000,
        // 是否自动打开浏览器 
        open: true,
    }
}

四、package.json 中配置

  "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"
  },

五、启动开发服务器

cnpm run dev

六、效果

• 1. 启动后会自动打开浏览器，当我们修改代码的时候，页面也会自动刷新。

     
     image.png