0.0.4 • Published 6 years ago
cdn-file-loader v0.0.4
@fe/cdn-file-loader
用于 Webpack 的定制版 file-loader,支持动态 CDN 域名。
配置:
{
test: /\.(jpg|jpeg|png|ico|svg)$/,
use: [
{
loader: "@fe/cdn-file-loader",
options: {
// 文件存储路径规则,相对于全局 outputPAth
name: "assets/images/[name].[hash:10].[ext]",
// 发布出去的时候,相对于 assets 目录的路径
publicPath: "../../"
}
}
]
}
对于 JS 文件获取publicPath需要存在变量RPCONFIG.cdnPrefix,动态计算:
<script>
const RPCONFIG = {
cdnPrefix: '//example.com/dist/',
};
</script>
文件目录结构限制:
- 所有资源文件存放在assets目录下
- 字体、图片、样式分别放在fonts、images、styles目录下,并且不能再有下一级的目录
├── assets
│ ├── fonts
│ │ ├── iconfont.eot
│ │ ├── iconfont.ttf
│ │ └── iconfont.woff
│ ├── images
│ │ └── bg.jpg
│ └── styles
│ ├── icon.less
│ ├── main.less
│ ├── scrollbar.less
│ └── theme.less
├── app.js
└── index.ejs
生成的文件目录结构:
├── assets
│ ├── fonts
│ │ ├── iconfont.8c900cd371.eot
│ │ ├── iconfont.9386799b65.woff
│ │ └── iconfont.d4d84c920c.ttf
│ ├── images
│ │ └── bg.a60d44f5f5.jpg
│ ├── scripts
│ │ ├── main.ba81a56af2.js
│ │ └── vendor.ba81a56af2.js
│ └── styles
│ └── main.ba81a56af2.css
└── index.html