webpack公共路径-WebPack 公共路径

WebPack 公共路径

webpack 提供了一个特别有用的配置，可以帮助您为项目中的所有资源指定基本路径。 它被称为公共路径（publicPath）。

例子

以下是一些示例，在实践中，这些示例的功能已被实现，同时保持高度的清洁度。

构建项目时设置路径值

在开发模式下，我们一般有assets/文件夹，它往往存放在 和 level 目录下。 这非常方便； 但如果在生产环境中，你想使用CDN统一加载这个，该怎么办？

为了解决这个问题，可以使用历史悠久的环境变量。 例如，我们设置一个名为 ASSET_PATH 的变量：

import webpack from 'webpack';
// 如果预先定义过环境变量，就将其赋值给`ASSET_PATH`变量，否则赋值为根目录
const ASSET_PATH = process.env.ASSET_PATH || '/';
export default {
  output: {
    publicPath: ASSET_PATH
  },
  plugins: [
    // 该帮助我们安心地使用环境变量
    new webpack.DefinePlugin({
      'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
    })
  ]
};

动态设置路径值

另一种可能的情况是我们需要动态设置公共路径。 webpack 提供了这个供你设置，它称为 __webpack_public_path__。 因此，在您的项目条目中，您可以简单地设置以下内容：

__webpack_public_path__ = process.env.ASSET_PATH;

一切都已准备就绪。 因为我们的配置项中已经使用了DefinePlugin，所以process.env.ASSET_PATH已经被定义了webpack公共路径，所以让我们安心使用吧。

警告：请注意webpack公共路径，如果您在条目中使用 ES6 模块导出，您将在导出后正式化 __webpack_public_path__ 。 在这种情况下，您必须将公共路径分配移动到您自己的专用模块，然后将其导出到您的entry.js之上：

// entry.jsimport './public-path';import './app';