4.8.1 用 Webpack 实现 CDN 的接入

4.8.1 用 Webpack 实现 CDN 的接入
问题一：用 Webpack 实现 CDN 的接入？

总结上面所说的，构建需要实现以下几点：

静态资源的导入 URL 需要变成指向 CDN 服务的绝对路径的 URL 而不是相对于 HTML 文件的 URL。
静态资源的文件名称需要带上有文件内容算出来的 Hash 值，以防止被缓存。
不同类型的资源放到不同域名的 CDN 服务上去，以防止资源的并行加载被阻塞。
先来看下要实现以上要求的最终 Webpack 配置：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const {WebPlugin} = require('web-webpack-plugin');

module.exports = {
// 省略 entry 配置...
output: {
// 给输出的 JavaScript 文件名称加上 Hash 值
filename: '[name]_[chunkhash:8].js',
path: path.resolve(_dirname, './dist'),
// 指定存放 JavaScript 文件的 CDN 目录 URL
publicPath: '//js.cdn.com/id/',
},
module: {
rules: [
{
// 增加对 CSS 文件的支持
test: /.css/,
// 给输出的 PNG 文件名称加上 Hash 值
use: ['file-loader?name=[name][hash:8].[ext]'],
},
// 省略其它 Loader 配置...
]
},
plugins: [
// 使用 WebPlugin 自动生成 HTML
new WebPlugin({
// HTML 模版文件所在的文件路径
template: './template.html',
// 输出的 HTML 的文件名称
filename: 'index.html',
// 指定存放 CSS 文件的 CDN 目录 URL
stylePublicPath: '//css.cdn.com/id/',
}),
new ExtractTextPlugin({
// 给输出的 CSS 文件名称加上 Hash 值
filename: [name]_[contenthash:8].css,
}),
// 省略代码压缩插件配置...
],
};

以上代码中最核心的部分是通过publicPath参数设置存放静态资源的 CDN 目录 URL， 为了让不同类型的资源输出到不同的 CDN，需要分别在：

output.publicPath中设置 JavaScript 的地址。
css-loader.publicPath中设置被 CSS 导入的资源的的地址。
WebPlugin.stylePublicPath中设置 CSS 文件的地址。
设置好publicPath后，WebPlugin在生成 HTML 文件和css-loader转换 CSS 代码时，会考虑到配置中的publicPath，用对应的线上地址替换原来的相对地址。