npm 包 set-webpack-public-path-loader 使用教程

在使用 webpack 打包时，我们经常会遇到静态资源路径不对的问题，在 webpack 4 以前还需要使用 html-webpack-plugin 等插件手动修改引用路径。而在之后的版本中，webpack 也新增了 publicPath 配置项来解决这个问题。但是在多个入口文件的情况下，为了让静态资源的路径正确，我们还需要手动设置每个入口文件的 __webpack_public_path__。其实，有一个 npm 包 set-webpack-public-path-loader 可以帮助我们自动完成这个步骤。

安装

使用 npm 安装：

npm install --save-dev set-webpack-public-path-loader

用法

1. 在 webpack 配置文件中添加 set-webpack-public-path-loader 的规则：

-- -------------------- ---- -------
-------------- - -
    -- ---
    ------- -
        ------ -
            -- ---
            -
                ----- ------------
                ---- ----------------------------------
            --
            -
                ----- ----------
                ---- ----------------------------------
            --
        -
    -
--

上述规则将会对 index.js 和 app.js 两个文件添加 set-webpack-public-path-loader 加载器，在编译时自动设置 __webpack_public_path__ 变量。

1. 在入口文件中导入 set-webpack-public-path-loader：

import 'set-webpack-public-path-loader!';  

1. 使用 __webpack_public_path__ 变量作为静态资源的前缀：

import img from './image.png';
const imgElement = document.createElement('img');
imgElement.src = __webpack_public_path__ + img;
document.body.appendChild(imgElement);

运行时，set-webpack-public-path-loader 会自动将 __webpack_public_path__ 设置为对应 entry 的 publicPath。

示例

webpack.config.js

-- -------------------- ---- -------
----- ---- - ----------------

-------------- - -
    ------ -
        ------ -----------------
        ---- --------------
    --
    ------- -
        ----------- -------------------------------
        --------- -------------------
        ----- ----------------------- -------
    --
    ------- -
        ------ -
            -
                ----- ------------
                ---- ----------------------------------
            --
            -
                ----- ----------
                ---- ----------------------------------
            --
        -
    -
--

src/index.js

// 导入 set-webpack-public-path-loader，同时设置 __webpack_public_path__
import 'set-webpack-public-path-loader!';  

import img from './image.png';
const imgElement = document.createElement('img');
imgElement.src = __webpack_public_path__ + img;
document.body.appendChild(imgElement);

src/app.js

// 导入 set-webpack-public-path-loader，同时设置 __webpack_public_path__
import 'set-webpack-public-path-loader!';  

import img from './image.png';
const imgElement = document.createElement('img');
imgElement.src = __webpack_public_path__ + img;
document.body.appendChild(imgElement);

在编译后，可以看到通过 set-webpack-public-path-loader 后，两个入口文件中的静态资源引用路径已自动设置为对应的 publicPath。

结语

使用 set-webpack-public-path-loader 可以帮助我们自动完成设置 __webpack_public_path__ 的任务，避免手动修改出错的情况。希望这篇文章能够帮助大家更好地使用 webpack。

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