关于‘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回答
-
同学你好,webpack 是不支持打包http协议的外网资源的,至少我目前是这么觉得的。如果你要实现这种打包,你需要自己写一个插件,把外网的css先拿到本地,再做后面的处理。
022019-02-22
相似问题