Write a simple loader

The so-called loader is the function that returns the processed file after the matched content is processed independently by certain logic. Loader-util plugins use getOptions() to obtain the value of loader option for WebPack 4.0. Loader-utils v2 version webPack5 can be installed GetOptions () has been removed eg:

const loaderUtils = require('loader-utils')
module.exports=function(source){
    //source represents the source file in string format matched according to the Loader test rule
    let options=loaderUtils.getOptions(this)// Get the option passed to the loader
    return source.replace('Replaced content'.'Replace content')}Copy the code

Use: For Vuecli

module.exports={
    chainWebpack:config= >{
        config.module.rules('js').test(/\.js$/).use('Custom loader path').loader('Custom loader path').option('Options passed to the loader usually appear as objects')
        // Define a loader whose rule is js name and match it with.js ending in.js. All files use the custom loader to pass parameters to the custom loader through option}}Copy the code

Write simple plugins

Plugins are the enrichment of Loader functions to solve the problem that Loader cannot implement, that is to say, their functions can be understood as extensions of program functions. Usually a class function needs to be instantiated using eg:

class CopyrightWebpackPlugin{
    constructor(name){
        // Plugins instantiate parameters that are passed in are usually also objects
        console.log(name)
        console.log('I'm a plug-in${name.name}`)}apply(compiler){
        // Sync plugins
         TapAsync () async () async () async () async () : Custom plugin name 2. Callback function (two parameters 1. Webpack this packaged instance object,2. The callback function needs to be executed manually after the function is complete.
         // tapPromise() The first parameter in the asynchronous delay execution is an instance of bwepack
    
        // Asynchronous
        compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin'.(compiation,cb) = >{
            //compication Build instance of this package
            compiation.assets['index.text'] = {source(){
                    return 'I am a resource'
                },
                size(){
                  return 21
                }


            }
            cb()

        })

        compiler.hooks.afterPlugins.tap('CopyrightWebpackPlugin'.(compiation) = >{
            // Compiation is the resource information in this build
            console.log('Plug-in completed with initialization')})// Asynchronous delay
        compiler.hooks.run.tapPromise('CopyrightWebpackPlugin'.compiler= > {
        
          // Compoler is an instance of Webpack
        
            
            return new Promise(resolve= > setTimeout(resolve, 1000)).then(() = > {
              console.log('Reach the Run hook asynchronously with delay')})})}}module.exports=CopyrightWebpackPlugin
 // Other hookapis refer to Webpack PluginAPI, where each hook function is defined as an argument to the callback function. The asynchook in the hook function stands for synchronous hook AsyncSeriesHook stands for asynchronous hook SyncBailHook Asynchronous delay
Copy the code

Use:

  config.plugin('copys').use(CopyrightWebpackPlugin,[{name:"esetset"}]) If there are multiple objects in the array, only the first object is taken
Copy the code