使用 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> 的页面。