使用 webpack-dev-server

Created: November-22, 2018

建立

設定一個簡單的專案來使用 webpack 後，babel 和反應釋出 $npm i -g webpack-dev-server 將安裝開發 http 伺服器以便更快地開發。

修改 webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'out'),
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    hot: true
  }
};

修改是在

output.publicPath 設定了一個路徑來提供我們的繫結服務（有關詳細資訊，請參閱 Webpack 配置檔案）
devServer
- contentBase 提供靜態檔案的基本路徑（例如 index.html）
- 當對磁碟上的檔案進行更改時，hot 將 webpack-dev-server 設定為熱重新載入

最後我們只需要一個簡單的 index.html 來測試我們的應用程式。

index.html 的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React Sandbox</title>
  </head>
  <body>

    <div id="app" />

    <script src="public/bundle.js"></script>
  </body>
</html>

使用此設定執行 $webpack-dev-server 應該在埠 8080 上啟動本地 http 伺服器，並在連線時應該呈現包含 <h1>Hello world!</h1> 的頁面。