[JavaScript知识库]webpack5学习与实战-（九）-区分开发和生产环境地配置

一，公共路径output.publicPath

这个地默认值是：’’，也就是说webpack打包出来地html文件中，会以这个为基准，链接资源。
它的写法有三种情况：

1，写的是http这种带协议的完整路径，就是CDN，链接互联网资源
2，写的是相对于服务的 URL，例如"/assets/"
3，最常见的及默认的“”，都是相对于index.html的相对地址

 output: {
    publicPath: "https://cdn.example.com/assets/", // CDN（总是 HTTPS 协议）
	publicPath: "//cdn.example.com/assets/", // CDN (协议相同)
	publicPath: "/assets/", // 相对于服务(server-relative)
    publicPath: "assets/", // 相对于 HTML 页面
	publicPath: "../assets/", // 相对于 HTML 页面
	publicPath: "", // 相对于 HTML 页面（目录相同）
  },

此外，webpack-dev-server 也会默认从 publicPath 为基准，使用它来决定在哪个目录下启用服务，来访问 webpack 输出的文件。

也就是说，按照我们之前的配置，打包出来的文件应该是这个样子的：

这个publicPath就是配置如何去访问这些文件，相对于index.html。
即index.html的绝对路径+publicPath+配置的filename来访问资源。
这里需要注意的一点是，css中引入图片之后，如果抽离css了，需要为它配置publicpath:

 {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 当前的css所在的文件要相对到dist文件夹
              publicPath: "../"
            }
          },
          "css-loader",
          "sass-loader"
        ]
      },

例如，这几个配置加了一层assets,css中就得也加一层才能返回dist: