运行时指定 Webpack 的 publicPath

发表于 | 更新于 | 阅读次数：

问题描述

一般情况下，我们在使用Webpack时，都会通过以下方式指定publicPath，它表示静态资源的访问地址。

1
2
3
4
5
6
7
{
    output: {
        path: `${__dirname}/dest`,
        filename: 'app-[hash].js',
        publicPath: '',
    }
}

如果你需要把静态资源放在 CDN 上，则同样可行。

1
2
3
4
5
6
7
{
    output: {
        path: `${__dirname}/dest`,
        filename: 'app-[hash].js',
        publicPath: 'https://cdn.example.com/',
    }
}

但是这样就把静态资源的地址写死了，而测试环境和生产环境的静态资源往往存在在不同的地方。OK，下面我就通过__webpack_public_path__变量来实现。

解决方法

  1. 在webpack配置文件（比如webpack.config.babel.js）中删除publicPath的选项。
1
2
3
4
output: {
    path: `${__dirname}/dest`,
    filename: 'app-[hash].js',
}
  1. 在html模板文件中添加以下代码
1
<script>window.webpackPublicPath = '<域名，可以由后端运行时改写，或由前端发布资源时改写>';</script>
  1. 上个步骤中后端已经给我们提供了静态资源访问地址了，那么怎么应用到静态资源中呢？创建一个新文件，名字自己定，比如叫做webpack.js。
1
2
/* eslint-disable */
__webpack_public_path__ = window.webpackPublicPath;
  1. 在 App 的入口文件的首行添加以下代码，其中./webpack.js就代表第三步创建的文件。
1
2
/* eslint-disable import/first */
import './webpack.js';

通过以上 4 个步骤即可实现有后端在代码运行时期指定publicPath了。