webpack使用方法（五）：使用watch mode和webpack-dev-server

---

前言

  在前面几篇文章中，每次想看页面效果都要手动复制index.html页面的路径到浏览器中，而且每次更新文件内容都需要重新执行打包命令，还要手动刷新浏览器才能看到最新的输出内容。
  那么有没有办法能让我们省去这些操作，提高开发效率呢？watch mode和webpack-dev-server给了我们答案。

---

一、使用watch mode(观察模式)

  在每次编译代码时，手动运行npx webpack会显得很麻烦。我们可以在webpack启动时添加“watch参数”，如果其中一个文件被更新，代码将被重新编译，所以你不必再去手动运行整个构建。

1. 在根目录新建04-development文件夹，将setup文件下的src文件夹、index.html、webpack.config.js文件复制进来。

2. 进入04-development文件夹，输入指令

   npx webpack --watch
   

3. 去浏览器运行，现在你随意修改hello-world.js的输出内容，都不用再去执行npx webpack命令进行重新编译了，刷新浏览器就可以看到效果。

二、使用webpack-dev-server

  上一步只是帮我们省去了每次修改文件，都要去重新编译的步骤，还是要自己去手动刷新浏览器，这里我们使用webpack-dev-server来解决这个问题。

1. 去根目录安装webpack-dev-server

   npm install --save-dev webpack-dev-server
   

2. 在webpack.config.js中配置一下devServer。

   const path = require('path');
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   module.exports = {
       entry:'./src/index.js',
       output:{
           filename:'bundle.js',
           path:path.resolve(__dirname, './dist')
       },
       mode:'development',
       plugins:[
           new HtmlWebpackPlugin({
               template:'./index.html',
               filename:'app.html',
               inject:'body'
           })
       ],
       devServer:{
           static:'./dist'
       }
   }
   

   static表示devServer指向的物理路径

3. 进入04-development目录，执行

   npx webpack-dev-server
   

   发现有一个http://localhost:8080/的服务启动了
   

4. 按住crtl点击一下这个服务，在浏览器上打开了一个页面，其实就是dist文件夹下的两个文件。
   

5. 点击app.html，打开开发者工具，可以看到hello world被输出了。同时还有两个提示。
   'Hot Module Replacement enabled.'表示热模块更新替换已经生效了
   ‘Live Reloading enabled.’表示实时更新也生效了

6. 现在你可以随意更改hello world.js文件的输出内容，它都会在浏览器的控制台中自动更新。

  其实webpack-dev-server没有输出任何的物理文件，它是把输出以后打包的文件放到了内存里。想要验证这一说法你可以删掉dist文件夹，甚至关闭再重新启动webpack-dev-server服务，对于浏览器的输出都不会造成任何影响。