关于‘file-loader'的outputPath的疑惑

来源:3-4 使用 Loader 打包静态资源(样式篇 - 下)

renderman

2019-02-22

问题:

当使用本地src目录中的静态字体时,可以正常打包输出字体文件,如图1。
但使用iconfont线上的字体时,无法打包输出字体文件,如图2。

// 图1,打包后的目录
dist
	|__woff				// 打包出来
	|__bundle.js
	|__...
src
	|__woff
	|__style.less		// 引用本地woff
	|__...
// 图2,打包后的目录
dist
	|__(null)			// 字体没有
	|__bundle.js		// 字体也没有
	|__...
src
	|__style.less		// 引用了iconfont提供的线上css
	|__...

代码

webpack.config.js中的rules定义

...
{
  test: /\.(woff|woff2|eot|ttf|svg)$/i,
  exclude: /node_modules/,
  use: {
    loader:"url-loader",
    options:{
      outputPath: "./fonts/",
      limit: 1 * 1024
    }
  }
}
...

less入口样式中,引用线上字体

// 
@import url("//at.alicdn.com/t/font_526860_xxqd3a0gqa9.css");

// 样式略

请问,引用线上css字体时,该如何将线上css整合到打包style中,并且字体文件打包到dist文件夹当中呢?

谢谢答疑解惑

写回答

1回答

Dell

2019-02-22

同学你好,webpack 是不支持打包http协议的外网资源的,至少我目前是这么觉得的。如果你要实现这种打包,你需要自己写一个插件,把外网的css先拿到本地,再做后面的处理。

0
2
renderman
非常感谢!
2019-02-22
共2条回复

从基础到实战 手把手带你掌握新版Webpack4.0

知识点+项目实例+原理讲解 全方位解析Webpack4新版本

3627 学习 · 1291 问题

查看课程