This is the 25th day of my participation in Gwen Challenge

[Webpack series of articles in serial…]

The Webpack plug-in is a JavaScript object with the Apply method. The Apply method is called by the Webpack Compiler and the Compiler object is accessible throughout the compile life cycle.

The first argument to compiler Hook’s tap method should be the camel-named plug-in name. It is recommended to use a constant for this so that it can be reused in all hooks.

1. Basic structure

Class Plugin{// Plugin name constructor(options){// Get the passing parameter this.options = options; Tap ('Plugin',(stats)=>{// Done hook triggered, })}} module.exports = Plugin;Copy the code

2. Declaration of configuration files

Module.exports = {entry:'./index.js', output:{path:'./dist', filename:'[name].js'}, Plugins :[new Plugin({plugins})]}Copy the code

3. Simulator Webpack calls plugin

Const {SyncHook} = require("tapable"); module.exports = class Compiler{ constructor(){ this.hooks = { // 1. Init :new SyncHook(['start']),}} run(){// 3. Plugin.js class plugin {constructor(){} apply(compiler){// 2. Tap ('start',()=>{console.log(' Compiler start')})}} // Emulates webpack.js const options = { plugins:[new Plugin()] } const compiler = new Compiler() for(const plugin of options.plugins){ if(typeof plugin==='function'){ plugin.call(compiler,compiler) }else{ plugin.apply(compiler) } } compiler.run()Copy the code

4. CorsPlugin cross-domain plug-in

Used to handle cross-domain problems when the domain name of the web page is inconsistent with the domain name of the site where the static file to be loaded is stored.

Module.exports = class CorsPlugin {constructor ({publicPath, crossorigin, integrity}) {/* * crossorigin: exports = class CorsPlugin {constructor ({publicPath, crossorigin, integrity}) {/* * crossorigin: exports = class CorsPlugin {constructor ({publicPath, crossorigin, integrity}) Anonymous | | ': this element of CORS requests will not be set credentials * value signs: use - credentials: this element of CORS requests will set the certificate mark; This means that the request will provide credentials */ this.crossorigin = crossorigin Integrity = integrity this.publicPath = publicPath} apply (compiler) {const ID = ` vue - cli - cors - plugin ` compiler.hooks.com pilation. Tap (ID, compilation = > {/ * * Standard Subresource Integrity abbreviation * used to resolve, Manipulate, serialize, generate, and validate Subresource Integrity hashes. */ const ssri = require(' ssRI ') // Compute file integrity const computeHash = url => {const filename = url.replace(this.publicPath, '') const asset = compilation.assets[filename] if (asset) { const src = asset.source() const integrity = ssri.fromData(src, { algorithms: ['sha384'] }) return integrity.toString() } } compilation.hooks.htmlWebpackPluginAlterAssetTags.tap(ID, data => { const tags = [...data.head, ...data.body] if (this.crossorigin ! = null) {/ / script | | link tag Settings allow cross-domain tags. The forEach (tag = > {the if (tag. The tagName = = = 'script' | | tag. The tagName = = = 'link') { Tag. The attributes. Crossorigin = this. Crossorigin}})} the if (this. Integrity) {/ / check if the file is the original tags. ForEach (tag = > {the if (tag.tagName === 'script') { const hash = computeHash(tag.attributes.src) if (hash) { tag.attributes.integrity = hash } } else if (tag.tagName === 'link' && tag.attributes.rel === 'stylesheet') { const hash = computeHash(tag.attributes.href) if (hash) { tag.attributes.integrity = hash } } }) // when using SRI, Chrome somehow cannot reuse // the preloaded resource, and causes the files to be downloaded twice. // this is a Chrome bug (https://bugs.chromium.org/p/chromium/issues/detail?id=677022) // for now we disable preload if SRI is used. data.head =  data.head.filter(tag => { return ! ( tag.tagName === 'link' && tag.attributes.rel === 'preload' ) }) } }) compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tap(ID, data => { data.html = data.html.replace(/\scrossorigin=""/g, ' crossorigin') }) }) } }Copy the code