webpack真是个妖艳货色，说它是个工【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】作流，但是分明是个打包器，但是你说它是打未经授权，禁止复制转载。原创内容，盗版必究。包器，又感觉太小看它。我在输出umd格式【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。的最终代码时，想兼容一下cmd，就是se【关注微信公众号：wwwtangshuangnet】【作者：唐霜】a.js那套，只需要在define.am转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netd后面加上define.cmd最为判断条本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】件即可。

首先要解决的是怎样能够在webpack的本文作者：唐霜，转载请注明出处。【本文受版权保护】打包流程中插入一脚，能够处理自己的逻辑。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。其次要解决的是，怎么在这一脚中修改要输出著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】的代码内容。

第一个问题简单，就是使用插件。【版权所有，侵权必究】

webpack的插件就是在webpack【原创不易，请尊重版权】【转载请注明来源】的过程流中进行处理的代码。插件形式很简单未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】，首先创建一个function类：

function WebpackPlugin() {}

其次给这个类添加一个apply方法：著作权归作者所有，禁止商业用途转载。

WebpackPlugin.prototype.apply = function(compiler) {
  // ....
}

最后，在apply方法中通过compil【原创不易，请尊重版权】【原创不易，请尊重版权】er，在流程中的某些节点上挂载一个处理函原创内容，盗版必究。【本文受版权保护】数。

WebpackPlugin.prototype.apply = function(compiler) {
  compiler.plugin("emit", function(compilation, callback) {
    // 在这里使用compilation进行处理
  })
}

这里面要你自己去详细了解三个东西：1. 【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netcompiler，2. compilat【版权所有，侵权必究】原创内容，盗版必究。ion，3. 和emit同一个层面的其他【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net节点名。

上面的代码基本描绘了本文要实现目标的这个本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。插件的大致框架。如果你想写webpack【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】的插件，可能还需要更深入的去了解一下。
【版权所有，侵权必究】【未经授权禁止转载】 第二个问题相对复杂一些，修改要输出的代未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。码内容就是要在文件生成之前对webpac【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。k内存中的buffer进行修改。

我的处理办法，是直接通过compilat原创内容，盗版必究。【版权所有，侵权必究】ion找到要输出的文件内容，通过repl【原创内容，转载请注明出处】【原创内容，转载请注明出处】ace进行替换，替换完之后，又把内容塞回【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】去。

import RawSource from "webpack/lib/RawSource"
export function WebpackSupportCmdInUmd() {}
WebpackSupportCmdInUmd.prototype.apply = function(compiler) {
  compiler.plugin("emit", (compilation, callback) => {
    if(compilation.options.output.libraryTarget !== "umd") {
      return
    }
    let outputfile = compilation.options.output.filename
    let assets = compilation.assets
    let keys = Object.keys(assets)
  
    keys.forEach(key => {
      if(outputfile !== key || outputfile.substr(outputfile.lastIndexOf('.')) !== ".js") {
        return
      }
      let asset = assets[key]
      let content = asset.source()
      content = content.replace("typeof define === 'function' && define.amd", "typeof define === 'function' && define.amd && define.cmd")
        .replace('"function"==typeof define&&define.amd', '"function"==typeof define&&define.amd&&define.cmd')
  
      assets[key] = new RawSource(content)
    })
    callback()
  })
}

上面的代码就是我的全部代码。compil本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netation.assets获取了所有的as【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。sets，也就是每一个要处理的文件，它的【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。key值是以options.output【原创内容，转载请注明出处】未经授权，禁止复制转载。.filename命名的，所以你可以看到转载请注明出处：www.tangshuang.net【转载请注明来源】我用outputfile去和key进行对著作权归作者所有，禁止商业用途转载。【作者：唐霜】比。

asset.source()是直接获取到【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】要输出的文件的内容。但是这个内容还是保存【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。在内存中的，还没有生成文件。而通过new【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net RawSource则创建了新的asse【未经授权禁止转载】【原创内容，转载请注明出处】t，再塞回去，这样输出来的文件内容就变了本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】。

2016-12-29 10358 webpack