cdn-file-loader

@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