1.如何编写一个Loader(一)
当我们打包一个类型文件/模块时 loader 就会起作用。 通过 npm init 初始化，并且安装好 webpack 相关包，简单配置一下。
const path = require( 'path; module.exports = { mode: 'development', entry: { main: './src/index.js'}, output: { path: path.resolve(_dirname, 'dist ' ),filename: '[name] . js' }
我们实现这么一个 loader ，如果引入一个 js 文件，看到一个 dell 字符串就改成 dell li 。
其实 loader 就是返回一个函数（不能箭头函数，因为需要用 到 this ，避免指向问题），可以接受参数 source （即引入文件的内容）。
module.exports = function(source) { return source.replace( 'dell', 'dellLee ' );}
如此即可完成一个 loader，回到 config 配置就行，注意引入的时候需要以路径形式写，不能直接写一个名字。
module: { rules:[{ test:/\js/ , use: [ path.resolve(__dirname, './loaders/ replaceLoader. ] }
Use 可以通过 options 传递参数，loader 通过 this.query 可以 获取参数。
use: [ { loader: path.resolve(_ dirname,'./loaders/ repl.options:{ name: 'lee'} }
module.exports = function(source){ return source.replace( 'dell', this.query.name);上
具体可以参考官网的 API。 为了更好的获取参数可以采用官方的插件.
const loaderUtils = require( ' loader-utils' );module.exports = function(source) { const options = loaderUtils.getOptions (this);return source.replace( 'dell', options.name);}
要是想往外抛出点什么可以通过 this.callback 方法。
this.callback(null,result)1
2.如何编写一个Loader（2）
如何在 loader 中执行异步代码呢，可以通过 this.async 方法声明一下，然后调用该方法返回结果。
const loaderUtils = require( 'loader-utils' ); module.exports = function(source) { const options = loaderUtils.get0ptions(this); const callback = this.async(); setTimeout(=>{ const result = source.replace( 'dell', options.name); callback( result); },1000); }
而该方法返回的其实就是 this.callback 方法。那怎么使用多个 loader ？这个就在 use 中使用多个就行了， 同异步可以一起使用。 为了避免一直都是写路径，可以给 loader 配个查找范围（默认在 node... ），然后就可以直接写名字了。
resolveLoadef: { modules: [ 'node_modules', './loaders '] } module: { rules: [{ test:/\.js/ , use: [ { loader: 'replaceLoader' , }, { loader: 'replaceLoaderAsync', options: { name: 'lee'} },] ]}
Loader 可以用于异常捕获、国际化等等，实际上就不需要侵入到业务代码了，通过 loader 检测处理即可，也就是说 loader 可以处理包装源代码.
3.如何编写一个Plugin
Loader 是处理模块， plugin 是在打包某个时刻生效（发布订阅机制）。 目前希望实现一个打包结束后在 dist 目录下生成一个版权文件。Plugin 本质上是一个类，类里面有个关键方法 apply 。
class CopyrightwebpackPlugin { constructor() { } apply(compiler){} } I module.exports =CopyrightwebpackPlugin;|
使用的话可以在 webpack.config.js 中引入，然后实例化（因为插件本质上是一个类）即可。
至于我们 new 实例化使用插件时传递的参数就是通过 constructor 接收了。 apply 函数的 compiler 就是一个 webpack 实例，通过它的hooks 钩子（具体可以看官网）可以去到对应的时刻值。 这边就采用了一个 emit 钩子（钩子异步与否是有一定影响的），由于该钩子是异步的我们就tapAsync 方法（则必须 调回调函数 cb ）。 注意 compiler 存放配置的所有内容（包括打包的）而参数compilation 是存放这一次打包的所有内容。
tapAsync( 'CopyrightwebpackPlugin', ( compilation，cb)
通过访问 compilation 里面的 assets 就可以找到打包生成的内容。这里 21 就是文件大小（指字符串长度）， source 就是文件具体内容。
compilation.assets[ copyright.txtj]={ source:function({ return "copyright by dell lee'}, size: function(){ return 21;l } ;cb();}) }
如果是同步代码就直接 tap 方法，且无需回调函数，其余参数一样。如果想查看 webpack 具体参数可以以 script 命令调试，还可以加参数，第一个是启动 node 的调试工具（方便调试插件），
第二个是在第一行打印一个断点，然后就可以在文件任意地方加断点，在浏览器 F12 看。
