背景

webpack 打包完成之后，资源有可能不保存在本地，有可能会放到了 CDN 上，这时如何配置？

图片字体等文件

图片、字体等基于 file-loader 或 url-loader 的文件的 cdn 配置，需要填写 publicPath 参数，如下：

  1. /** ./webpack.config.js **/
  2. module.exports = {
  3.   //...
  4.   module: {
  5.     rules: [
  6.       {
  7.         loader: 'url-loader',
  8.         options: {
  9.           limit: 10240,
  10.           publicPath:'https://www.baidu.com/img',
  11.           outputPath: 'img'
  12.         }
  13.       }
  14.     ]
  15.   }
  16.   //...
  17. }

这边注意的是 publicPath 和 outputPath 没有直接的关系。
打包过后，结果如下：
image.png
image.png
发现路径前加了 cdn 前缀，这就成功了。

javascript 文件

对于 cdn 的 js 文件，只要在 output 参数中，设置 publicPath 即可，如下：

  1. /** ./webpack.config.js **/
  2. let path = require('path');
  3. //...
  4. module.exports = {
  5.   //...
  6.   output: {
  7.     publicPath: 'https://www.baidu.com/js'
  8.     filename:'[name].[contenthash:8].js',
  9.     path: path.resolve(__dirname, 'dist')
  10.   }
  11.   //...
  12. }
  16. //...

打包结果如下：
image.png

css 文件

对于 cdn 中的 css 文件也是在 loader 中配置，如下：

  1. /** ./webpack.config.js **/
  2. let MiniCssExtractPlugin = require('mini-css-extract-plugin');
  4. module.exports = {
  5.   module:{
  6.     rules:[
  7.       {
  8.         test: /\.css$/,
  9.         use:[
  10.           {
  11.             loader: MiniCssExtractPlugin.loader,
  12.             options: {
  13.               publicPath: 'http://www.baidu.con/css'
  14.             }
  15.           }
  16.         ]
  17.       }
  18.     ]
  19.   },
  20.   plugins: [
  21.     new MiniCssExtractPlugin({
  22.       filename: 'css/main.css'
  23.     })
  24.   ]
  26. }

打包结果如下：
image.png
这时我们发现 css 也是访问 cdn 路径了。

其他文件

其他大多数 loader 都是类似的，都可以这么配置，具体看一下 loader 的说明文档就行。