JavaScript

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > webpack publicPath区别

webpack5之output和devServer的publicPath区别示例详解

作者:想赚点零花钱

这篇文章主要为大家介绍了webpack5之output和devServer的publicPath区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

一. output的publicPath

我们知道output中的path的作用是打包后文件输出的目录:比如静态资源的js、css等输出,常见的会设置为dist、build文件夹等;

output中还有一个publicPath属性,该属性是指定index.html文件打包引用的一个基本路径:

举例:

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包后的文件的输出目录
    path: path.resolve(__dirname, "./build"),
    // 在打包之后的静态资源前面进行一个路径的拼接:
     publicPath: "./"
  },
  }

打包后: 

二. devServer的publicPath

devServer中也有一个publicPath的属性,该属性是指定开发环境webpack serve下开启本地服务所在的文件夹:

举例:

module.exports = {
  // watch: true,
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包后的文件的输出目录
    path: path.resolve(__dirname, "./build"),
    // 在打包之后的静态资源前面进行一个路径的拼接
     publicPath: "/abc" //和下方publicPath设置一样
  },
  // 专门为webpack-dev-server
  // devServer为开发过程中, 开启一个本地服务
  devServer: {
    compress: true, //文件压缩启用 [gzip compression]
    publicPath: "/abc",
    },
  }

官方提到: devServer.publicPath 与 output.publicPath相同

打包后: 

注意:上方devServer设置/abc后,我们其中的bundle.js通过 http://localhost:8080/bundle.js是无法访问的,报错如下:

所以devServer.publicPath 与 output.publicPath设置要相同!

以上就是webpack5之output和devServer的publicPath区别示例详解的详细内容,更多关于webpack publicPath区别的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文