【webpack】四、使用webpackDevServer提升开发效率

使用webpackDevServer提升开发效率

通过前几章的学习，我们发现每次更改完代码后，为了能在浏览器中正确运行，都需要手动地在控制台输入npm run bundle 命令来进行打包 ，然后再手动地到浏览器中打开index.html文件，才能实现代码的重新编译与运行。这样是非常影响我们的开发效率的，此时webpackDevServer应运而生。

在使用webpackDevServer前，我们不妨先试试webpack自带watch命令

1. webpack自带watch命令

打开package.json文件，修改scripts中的内容为

"scripts": {
   "watch": "webpack --watch"
 },

然后在控制台输入npm run watch重新打包，此时我们index.js文件中只有一行hello word的代码。

当我们修改index.js中的内容，然后再刷新浏览器页面，代码便成功自动更新了！

2. webPackDevServer

安装webpackDevServer

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

如下，在webpack.config.js配置文件中添加devServer配置项

module.exports = {
  mode: 'development',
  devtool: 'source-map',,
  entry: {},
  //使用webpackDevServer为我们实现服务端的功能
  devServer: {
    //指定服务端的路径
    contentBase: './dist'
  },
  module: {},
  plugins: [],
  output: {}
}

再到package.json文件中scripts中添加start配置

"start": "webpack-dev-server"

运行npm run start命令，编译成功后翻看控制台日志，发现webpack为我们在8080端口上启动了一个服务。

像Vue、React这一类的框架之所以能以服务的形式启动，正是因为它们是基于webpack构建的。

访问webpack为我们启动的这个服务，发现不仅修改源代码会实时编译，而且编译完后自动就将修改后的内容更新到浏览器上了，连刷新浏览器的工作它都帮我们干了！

3. webpackDevServer的进阶配置

webpack.config.js配置文件中devServer的进阶配置

• open为true，项目启动时会自动打开浏览器访问项目
• proxy指定要转发的地址，通常指向后端接口，且支持跨域
• devServer更多的配置，如端口、响应头等，可参考官方文档

module.exports = {
  mode: 'development',
  devtool: 'source-map',,
  entry: {},
  //使用webpackDevServer为我们实现服务端的功能
  devServer: {
    //指定服务端的路径
    contentBase: './dist',
    //open为true，项目启动时会自动打开浏览器访问项目
    open: true,
    //proxy指定要转发的地址，通常指向后端接口，且支持跨域
    proxy: {
      '/api': 'http://localhost:8081'
    }
  },
  module: {},
  plugins: [],
  output: {}
}