webpack 配置中 output.publicPath 详解-JavaScript中文网-JavaScript教程资源分享门户

在使用 webpack 进行前端开发时，我们经常需要配置 output 选项来指定输出文件的路径和文件名。其中，output.publicPath 是一个非常重要的选项，它决定了 webpack 编译后的文件在浏览器中的访问路径。

publicPath 的作用

在使用 webpack 打包后，我们会得到一个或多个输出文件，这些文件包括 JavaScript、CSS、图片等资源。这些资源在浏览器中访问时，需要通过 URL 来获取。而 output.publicPath 就是用来指定这些资源的 URL 前缀。

例如，假设我们的 output.publicPath 设置为 /assets/，并且有一个输出文件叫做 main.js，那么在浏览器中访问 http://example.com/assets/main.js 就可以获取到这个文件。

除了 JavaScript 文件外，output.publicPath 还影响到其他类型的资源，例如 CSS 文件中的图片、字体等资源的 URL，以及使用 import() 动态加载的模块的 URL 等。

如何设置 publicPath

在 webpack 配置文件中，我们可以通过 output.publicPath 选项来设置 publicPath。这个选项可以是一个字符串，也可以是一个函数。

字符串形式的 publicPath

如果我们的资源都存放在同一个目录下，那么可以直接将 output.publicPath 设置为该目录的 URL 前缀。例如：

module.exports = {
  output: {
    publicPath: '/assets/'
  }
};

这样，所有资源的 URL 前缀都会是 /assets/。

函数形式的 publicPath

如果我们的资源存放在不同的目录下，或者要根据环境变量动态设置 publicPath，那么可以使用函数形式的 output.publicPath。

这个函数接收一个参数 resourcePath，表示当前资源的路径。我们可以根据这个参数来动态计算 publicPath。例如：

// www.javascriptcn.com code example
module.exports = {
  output: {
    publicPath: (resourcePath) => {
      if (/\.css$/.test(resourcePath)) {
        return 'https://cdn.example.com/css/';
      } else if (/\.js$/.test(resourcePath)) {
        return 'https://cdn.example.com/js/';
      } else {
        return 'https://cdn.example.com/assets/';
      }
    }
  }
};

这里的函数根据资源的后缀名来判断 publicPath，如果是 CSS 文件，就返回 https://cdn.example.com/css/，如果是 JavaScript 文件，就返回 https://cdn.example.com/js/，否则返回 https://cdn.example.com/assets/。

publicPath 的注意事项

在设置 output.publicPath 时，需要注意以下几点：

publicPath 应该以斜杠 / 开头和结尾，表示绝对路径。
如果使用 CDN 加速，publicPath 应该指向 CDN 的地址。
如果使用多页面应用，publicPath 应该根据页面的 URL 来设置，否则可能会出现资源加载错误的问题。

示例代码

下面是一个完整的 webpack 配置文件，其中使用了函数形式的 output.publicPath，根据环境变量来动态设置 publicPath：

// www.javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'main.js',
      publicPath: (resourcePath) => {
        if (/\.css$/.test(resourcePath)) {
          return 'https://cdn.example.com/css/';
        } else if (/\.js$/.test(resourcePath)) {
          return 'https://cdn.example.com/js/';
        } else {
          return 'https://cdn.example.com/assets/';
        }
      }
    },
    module: {
      rules: [
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development')
      })
    ]
  };
};

这个配置文件中，根据资源的后缀名来判断 publicPath，CSS 文件和 JavaScript 文件的 publicPath 分别指向 https://cdn.example.com/css/ 和 https://cdn.example.com/js/，其他资源的 publicPath 则指向 https://cdn.example.com/assets/。同时，根据环境变量来设置 process.env.NODE_ENV，用于区分开发环境和生产环境。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d1151ba941bf713424ec58

webpack 配置中 output.publicPath 详解