Question

我正在尝试在带有laravel mix的webpack项目中使用图标字体。这是我的webpack.mix.js

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({ processCssUrls: true });

我以这种方式在我的app.js中添加了图标字体：

require("../demo1/src/assets/plugins/line-awesome/css/line-awesome.css");

这是line-awesome.css中的@ font-face声明

@font-face {
  font-family: "LineAwesome";
  src: url("../fonts/line-awesome.eot?v=1.1.");
  src: url("../fonts/line-awesome.eot??v=1.1.#iefix") format("embedded-opentype"),
       url("../fonts/line-awesome.woff2?v=1.1.") format("woff2"),
       url("../fonts/line-awesome.woff?v=1.1.") format("woff"),
       url("../fonts/line-awesome.ttf?v=1.1.") format("truetype"),
       url("../fonts/line-awesome.svg?v=1.1.#fa") format("svg");
  font-weight: normal;
  font-style: normal;
}

然后使用laravel mix npm run dev构建文件。并且app.js成功创建，没有错误。但是，在生成的js中。字体文件路径开头是这样的斜杠：


/***/ "./resources/demo1/src/assets/plugins/line-awesome/fonts/line-awesome.eot?":
/*!****************************************************************************************!*\
  !*** ./resources/demo1/src/assets/plugins/line-awesome/fonts/line-awesome.eot??v=1.1. ***!
  \****************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = "/fonts/line-awesome.eot?3f85d8035b4ccd91d2a1808dd22b7684";

/***/ }),

虽然我的laravel公共目录在此路径中

http://localhost/webpacktest/public

以及该路径中的字体文件

http://localhost/webpacktest/public/fonts/line-awesome.eot

但是因为开头有一个斜杠，所以浏览器会尝试访问

http://localhost/fonts/line-awesome.eot

显然失败了。然后我尝试从此手动更改构建的js文件：

...
module.exports = "/fonts/line-awesome.eot?3f85d8035b4ccd91d2a1808dd22b7684";
...

对此：

...
module.exports = "./fonts/line-awesome.eot?3f85d8035b4ccd91d2a1808dd22b7684";
...

并且字体成功加载。

如何将module.exports路径从“ /”更改为“ ./”，这样我就不需要在每次构建后都手动替换它们？

我尝试了publicPath选项，但是它不起作用。

在webpack生成的js中使用图标字体文件的相对路径

0 个答案: