webpack-dev-server和watch的配置

webpack-dev-server的理解：它能帮助我们在源代码更改的情况下，自动 帮我们打包我们的代码并 启动 一个小型的服务器。如果与热更新一起使用，它能帮助我们高效的开发。

自动打包的方案，通常来说有如下几种：

• watch参数自动打包：它是在打包命令后面跟了一个--watch参数，它虽然能帮我们自动打包，但我们任然需要手动刷新浏览器，同时它不能帮我们在本地启动一个小型服务器，一些http请求不能通过。
• webpack-dev-server插件打包(推荐)：它是我们推荐的一种自动打包方案，在开发环境下使用尤其能帮我们高效的开发，它能解决watch参数打包中的问题，如果我们与热更新(HMR)一起使用，我们将拥有非常良好的开发体验。

watch参数自动打包

使用watch参数进行打包，我们需要在package.json中新增一个watch打包命令，它的配置如下

{
  // 其它配置
  "scripts": {
    "bundle": "webpack",
    "watch": "webpack --watch"
  }
}

在配置好上面的打包命令后，我们使用npm run watch命令进行打包，然后在浏览器中运行dist目录下的index.html，运行后，我们尝试修改src/index.js中的代码，例如把hello,world改成hello,dell-lee，改动完毕后，我们刷新一下浏览器，会发现浏览器成功输出hello,dell-lee，这也证明了watch参数确实能自动帮我们进行打包。

webpack-dev-server打包

要使用webpack-dev-server，我们需要使用如下命令进行安装

$ npm install webpack-dev-server -D

安装完毕后，我们和watch参数配置打包命令一样，也需要新增一个打包命令，在package.json中做如下改动：

// 其它配置
  "scripts": {
    "bundle": "webpack",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server'
  }

配置完打包命令后，我们最后需要对webpack.config.js做一下处理：

module.exports = {
  // 其它配置
  devServer: {
    // 以dist为基础启动一个服务器，服务器运行在4200端口上，每次启动时自动打开浏览器
    contentBase: 'dist',
    open: true,
    port: 4200
  }
}

在以上都配置完毕后，我们使用npm run dev命令进行打包，它会自动帮我们打开浏览器，现在你可以在src/index.js修改代码

 

原文地址：https://wangtunan.github.io/blog/webpack/core.html#%E4%BD%BF%E7%94%A8webpackdevserver