loader和plugin有什么区别呢?什么是loader,什么是plugin。


当我们在源代码里面去引入一个新的js文件或者一个其他格式的文件的时候,这个时候,我们可以借助loader去帮我们处理引用的文件,这是loader的一个作用

当我们在做打包的时候,在某一些具体时刻上,比如打包结束后,我要自动生成一个html文件,这个时候就可以使用一个htmlwebpackplugin的插件, 比如在打包之前,要把dist目录清空,这个时候可以使用clearwebpackplugin。

 


首先新建一个项目plugin


npm init -y


npm install webpack webpack-cli --save-dev


新建文件夹src,index.js


 


index.js




console.log('hello world');


webpack.config.js




const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
}


package.json




"scripts": {
  "build": "webpack"
}


运行npm run build,运行完成。生成main.js。输出hello world。


 


我现在要做这样一个功能,打包完后在dist下面帮我自动生成一个版权信息的js。在根目录下新建一个文件夹叫做plugins。在新建一个js叫做copyright-webpack-plugin.js。插件的定义跟loader不一定,loader是一个函数,插件是一个类


copyright-webpack-plugin.js




class CopyrightWebpackPlugin {
  constructor(){
    console.log('插件被使用了')
  }
  apply(compiler) {
  }
}
module.exports = CopyrightWebpackPlugin;


格式大概长成这个样子,所以每次定义一个插件的时候,都长这个样子。


 


接着我们要使用他,在webpack.config.js里面去使用他




const CopyRightWebpackPlugin = require('./plugins/copyright-webpack-plugin');
module.exports = {
  plugins: [
    /**
    * 所以知道为什么插件要一个new,因为是一个类,用的时候需要new一下。
    * new这个插件的时候,就使用了这个插件
    */
    new CopyRightWebpackPlugin()
  ],
}


然后运行npm run build。发现控制台打印出了'插件被使用了'。确实使用了,但是什么没干。




这个时候在new 的时候传入参数。插件里面constructor就可以获取到了。


copyright-webpack-plugin.js




class CopyrightWebpackPlugin {
  /**
  * compiler是webpack的一个实例,这个实例存储了webpack各种信息,所有打包信息
  * https://webpack.js.org/api/compiler-hooks
  * 官网里面介绍了compiler里面有个hooks这样的概念
  * hooks是钩子的意思,里面定义了时刻值
  */
  apply(compiler) {
  /**
  * 用到了hooks,emit这个时刻,在输出资源之前,这里官网告诉我们是一个异步函数
  * compilation是这一次的打包信息,所以跟compiler是不一样的
  * tapAsync接受两个参数,第一个是名字,
  */
  compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation, cb)=>{
    debugger;
    compilation.assets['copyright.txt'] = {
      source: function(){
        return 'copyright by q'
      },
      size: function() {
        return 15
      }
    };
    // 最后一定要调用cb
    cb();
  })
  /**
  * 同步的时刻跟同步的时刻写代码的方式不一样
  * 同步的时刻,后面只要一个参数就可以了
  */
  compiler.hooks.compile.tap('CopyrightWebpackPlugin',(compilation) => {
    console.log('compiler');
  })
  }
}
module.exports = CopyrightWebpackPlugin;


然后运行,dist下就生成了一个copyright.txt。里面是copyright by q。




这里有个疑问,我怎么知道compilation有assert这样的东西,这里有个debugger。




"scripts": {
  "debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js",
  "build": "webpack"
},


运行debug,就可以对插件进行调试,能够可视化对看见compilation下所有的信息。debug跟build是同样的一个东西,只不过debug可以在里面传入参数,比如--inspect表示打开调试