插件以及资源定位

CDN

CDN（Connect Delivery Network)是一种部署策略，包括分布式存储，负载均衡，内容管理等模块，CDN的一个重要功能是将静态资源缓存到用户近距离的CDN节点上，不但能提高用户对静态资源的访问速度，还能节省服务器的带宽消耗，降低负载。实现此功能的一个重要前提是将静态资源部署到已接入CDN的专属服务器，而这类服务器通常与Web主页面处于不同域名下，这样做的主要目的是为了充分利用浏览器的并发请求能力，提高页面的加载速度。

webpack的逆向注入模式

{
    entry:{
        'main.app':'./js/main.app.js'
    },
    output:{
        path:'./dist',
        filename:'[namr].[chunkhash].js',
        publicPath:'//static.app.com/app/'
    },
    module:{
        rules:[{
            test:/\.js$/,
            loader:'babel-loader'
        },{
            test:/\.css$/,
            use:ExtractTextPlugin.extract({
                use:'css-loader'
            })
        },
        ]
    },
        plugins:[
            newExtractTextPlugin({
                filename:'style/[name].[chunkhash].css',
            }),
            new HtmlWebpackPlugin({
                filename:'index.html',
                template:'index.html',
                inject:true
            })
        ]
}

index.html源码没有引用main.app.css的标签和main.app.js的script标签，然而构建后的文档内容被注入了对应的引用标签并且引用地址为构建之后的资源地址
构建之后的资源地址被修改为带有CDN服务器域名和路径信息的完整URL，并且CDN的信息与配置中的publicPath一致，这是webpack提供的可用于指定静态资源CDN服务器信息的配置项

多页面项目资源定位

编写一个html-wepack-plugin-before-html-processing插件，保证在html-wepack-plugin-before-html-processing阶段能够执行以下行为：

获得静态资源构建后的URL
获得并且修改HTML文档的内容

编写webpack组件，清楚两个对象：compiler和compilation

compiler对象代表的是webpack执行环境的完整配置，只会在启动webpack时被创建，并且在webpack运行期间不会被修改

compilation对象代表某个版本的资源对应的编译进程，当使用webpack的development中间件时，每次检测到项目文件有改动会创建一个compilation，进而能够针对改动生产全新的编译文件，compilation对象包含当前模块资源，待编译文件，有改动的文件和监听依赖的所有信息

编写一个构造函数用于接收配置：

const HtmlWebpackPluginForLocate=function(options){
    this.options={...options}//options用来提供给用户配置插件功能的细节

}
//针对指定事件阶段编写apply方法
HtmlWebpackPluginForLocate.prototype.apply=compiler=>{
    compiler.plugin('compilation',compilation=>{
        compilation.plugin('html-webpack-plugin-before-html-processing',(htmlPluginData,callback)=>{
            //插件行为逻辑
        })
    })
}

html-webpack-plugin-before-html-processing阶段捕获两个对象，callback的作用类似于Express中间件中的next函数，执行完当前插件的逻辑后必须调用callback以便进入后序流程，它属于webpack流程控制的一部分，没有构建相关的信息