[6] 开发服务器(DevServer)一、是什么开发中 Server(devServer)。 webpack-dev

一、是什么

开发中 Server(devServer)。
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。也就是启动了 webpack-dev-server 之后, 每次修改源文件代码就不用再手动重新构建, 它会自动检测到代码变化, 自动重新构建。

二、几个注意点

首先devServer里面的配置只有在开发环境-development时才会走，因为只有启动run serve 时才会启动devServe服务器。
要想启动服务，必须的用HtmlWebpackPlugin插件。

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },

三、属性

output: {
    path: path.resolve(__dirname, 'public/assets'), // 打包后放到哪里，默认是dist
    publicPath: 'https://cdn.example.com/assets/',
},
devServer: {
    public: `http://my.sankuai.com:${process.env.PORT}/`, // ---覆盖output里面的path和publicPath。非开发环境不会走到devServe中，所以用的是outPut的。
    port: process.env.PORT,
},

public理解为host：域名的意思。

publicPath: 路径的意思。先走outPut.publicPath，如果开发时进来devServe的publicPath，则覆盖前面outPut.publicPath，使用devServe的publicPath。