Webpack 5（九）Dev Server

安装 webpack-dev-server

npm i -D webpack-dev-server

修改 package.json

"scripts": {
  "build": "webpack",
  "serve": "webpack serve --open"
},

修改 webpack.config.js

module.exports = {
  // 开发模式推荐
  devtool: 'eval-source-map'
  // 生产模式推荐
  devtool: 'source-map'
  devServer: {
    // hot 默认为 true
    hot: true,
    // 如果返回结果为 404，则重定向到 index.html
    historyApiFallback: true,
    client: {
      // 当出现编译错误或警告时，在浏览器中显示全屏覆盖
      overlay: true,
    },
    devMiddleware: {
      // 自定义访问资源的路径
      publicPath: '/publicPathForDevServe/'
    },
    // 设置静态资源目录的位置以及访问路径，如果不需要静态资源，则不需要设置 static 属性
    static: {
      directory: path.resolve(__dirname, 'assets'),
      publicPath: '/static/'
    }
}

在开发模式下，devServer 自动开启一个开发服务器，并且将所有打包生成的资源存储到内存当中，然后通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称来访问对应的资源。 这时候 output.publicPath 应该设置为相对服务的路径，例如 /。

如果不想使用默认的基于 output.publicPath 的资源访问路径，可以设置 devServer 配置中的 devMiddleware.publicPath 选项自定义访问资源的路径，通过 http://[devServer.host]:[devServer.port]/[devMiddleware.publicPath]/资源名称 来访问对应的资源，但是通过插件生成的 html 和 css 文件当中所有资源引用的路径仍然使用的是 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称。因此需要保证 output.publicPath 与 devMiddleware.publicPath 一致。

通过 http://[devServer.host]:[devServer.port]/webpack-dev-server 查看 devServer 提供的所有资源列表。

静态资源

静态资源是那些不属于模块的依赖图中的资源，因此 webpack 不会打包静态资源，静态资源会原封不动地放在原处。static 设置的是静态资源目录的位置。

• static.directory 设置静态资源的存储路径
• static.publicPath 设置静态资源的访问路径。
• output.path 设置的是打包资源的存储路径
• output.publicPath 设置的是打包资源的访问路径