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