资源文件路径问题
Webpack中涉及到很多路径的操作，文件的生成路径，资源的引入路径等等，有时候配置的小差异，就会导致路径不正确的问题。同时在之前的学习中，构建出的项目文件全部是在同一个文件夹dist目录下，较好的实践是同一类型的资源应该是在一个统一的文件夹下面，比如生成的JavaScript文件全部放在同一个文件夹下面，Css文件全部放在同一个文件夹下面。此章节针对于上述两个问题给出具体的解决方案。
生成资源文件夹
假设项目中使用了JavaScript，Css，字体图标和其他媒体资源，我们希望在构建完成之后，生成对应的文件夹专门存放对应类型的资源，对于异步加载的Chunk，希望也单独生成一个文件夹。可以做如下配置：
module.exports = {
output: {
filename: 'js/[chunkhash:8].js',
chunkFilename: 'chunkJs/[chunkhash:8].js'
},
plugins: [
new HtmlwebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
'css-loader'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'font/[name].[ext]'
}
}
]
},
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader',
// 使用url-loader处理图片，如需生成对应文件 夹，需指明limit
// 如果希望使用的图片都在生成的images文件下， 则推荐使用file-loader
options: {
limit: 50,
name: 'images/[name].[ext]'
}
}
]
}
]
}
}
在配置中使用output.filename和output.chunkFilename对应生成了js和chunkJs文件夹，专门用于存放同步加载的JavaScript和异步加载的JavaScript。使用File-loader和Url-loader中的name属性，生成了对应的font文件夹和images文件夹，专门用于存放font资源和图片资源。最后使用了MiniCssExtractPlugin的filename生成了用于存放Css文件的文件夹。
资源路径引用问题
上一章节的配置，已经成功的把生成的各种资源进行归类收纳，但是使用了该配置，导致有些资源产生了路径引入错误，比如上面案例中的背景图片显示不出来。设置背景图片的源码如下：
#root{
width: 100px;
height: 100px;
background: #fff url('./imgs/1.jpg') center/100%;
}
构建之后，生成的代码如下：
#root{
width: 100px;
height: 100px;
background: #fff url(images/1.jpg) center/100%;
}
在结合我们最后构建生成的目录来看，编译过后的图片引入路径是不对的，可以手动修改为:
#root{
width: 100px;
height: 100px;
background: #fff url(../images/1.jpg) center/100%;
}
在使用图片极少的情况下，手动修正是一种办法，但是后面如果引入大量图片，同时为了性能采用了代码压缩，那么手动修改的方式就显得力不从心。
为了一劳永逸，我们还是得从配置中做文章，为了解决背景图片显示不出来的问题，可以修改Url-loader的配置如下：
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader',
// 使用url-loader处理图片，如需生成对应文件夹，需指明limit
// 如果希望使用的图片都在生成的images文件下，则推荐使用 file-loader
options: {
limit: 50,
name: 'images/[name].[ext]',
publicPath: '../'
}
}
]
}
给Url-loader设置publiPath之后，背景图片能够正确显示。其中publicPath为资源引入的路径，其在Webpack中很多地方都有实现，比如Output,Url-loader和MiniCssExtractPlugin中。假设一个资源引入路径为src，那么配置publicPath之后，其最终路径为publicPath+src。除了publicPath，其他loader或者插件中还会有其他修改路径的属性存在，比如url-loader中存在outpath，决定资源最后输出的位置，那么该资源引入的地址会变成publicPath+outpath+src。所以在使用Webpack的时候，一定要清楚相关资源的路径，才能确保项目加载资源的时候引入地址正确无误。
CDN加载
让所有的资源都在同一个服务器上的固定几个文件里，并且只向同一个服务其发送资源请求，通常是不明智的，会导致网页加载缓慢。有时候为了网页的加载性能，我们需要充分利用浏览器的并行加载能力，来提升我们网页的加载性能。其中较好的解决方式之一为CDN加载：让不同的资源部署在不同的CDN服务器上面，来提升加载速度。
在Webpack中有很多资源都可以设计成CDN加载，比如使用Vue，React等庞大的三方库的时候，就可以使用相关的插件就行CDN加载的配置。在此章节从publicPath的角度介绍一下如何把构建的资源使用CDN加载。
如下需求：
1.JavaScript资源和Css资源使用一个CDN服务器,可以做如下配置：
module.exports = {
output: {
filename: 'js/[chunkhash:8].js',
chunkFilename: 'chunkJs/[chunkhash:8].js',
publicPath: '//jsCss/cdnServer' // 模拟服务器，开发中按照实际需求填写
},
}
配置以后，JavaScript的加载路径大致为//jsCss/cdnServer/js/0a47d321.js，Css的加载路径大致为//jsCss/cdnServer/css/main.css
2.图片资源使用一个CDN服务器。
{
loader: 'url-loader',
options: {
limit: 50,
name: 'images/[name].[ext]',
publicPath: '//img/cdnServer'
}
}
在这里我们巧用publicPath给特定类型的资源加上特定的请求服务器地址，实现并行加载，加速页面的渲染。
本章节提供案例源码下载:https://gitee.com/mvc_ydb/webpack/blob/master/handlePath.zip