在开发componer的preview功【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net能时，我希望实现一个功能：修改文件的时候【作者：唐霜】【版权所有】唐霜 www.tangshuang.net实时刷新浏览器。于是我选择使用brows本文作者：唐霜，转载请注明出处。【未经授权禁止转载】er-sync来实现，但是仍然有一个问题著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】，当我修改文件时，需要使用webpack本文作者：唐霜，转载请注明出处。原创内容，盗版必究。对文件进行打包，也就是说我执行bs.re【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】load()必须是在打包结束之后执行。这【关注微信公众号：wwwtangshuangnet】【作者：唐霜】在逻辑上没有问题，然而有时候打包会把d3【本文受版权保护】【版权所有】唐霜 www.tangshuang.net包进来，将花掉很多事件，这给开发带来了巨转载请注明出处：www.tangshuang.net【作者：唐霜】大浪费。于是开始思考如何提高这个效率。

最后，我想到将d3和我自己的项目文件分开【本文首发于唐霜的博客】原创内容，盗版必究。，d3本身的代码我基本不会动，所以我应该转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。每次打包的时候都不管它。除了d3，包括j原创内容，盗版必究。【本文首发于唐霜的博客】query在内的其他依赖包其实是一样的，原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。都不需要打包。

在网上翻滚了很久之后，发现了webpac【转载请注明来源】原创内容，盗版必究。k自带的CommonsChunkPlugin这个【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】插件，它可以把依赖和项目代码分离，产生两著作权归作者所有，禁止商业用途转载。【本文受版权保护】个chunk文件，一个是项目文件，一个是【本文受版权保护】著作权归作者所有，禁止商业用途转载。依赖文件。但是最终发现CommonsCh【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】unkPlugin是个坑，它每次打包都会著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。去产生这两个文件，而且每次的hash值都【作者：唐霜】未经授权，禁止复制转载。不同，于是放弃了。

在看【原创不易，请尊重版权】CommonsChunkPlugin【作者：唐霜】的时候，发现了DLL，也是webpack【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】自带的。DLL方案包括两个插件，一个是D【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】llPlugin，另一个是DllRefe【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。rencePlugin。前者是将项目文件【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】的依赖包提前打包好，同时产生一个.jso【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netn文件，这个.json文件里面包含了依赖【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】包各个模块对应的信息。而第二个插件就是使转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。用第一个插件打包出来的依赖包，而且因为有著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。了这个.json文件，所以在打包的时候根【原创内容，转载请注明出处】【作者：唐霜】据这个文件里面的记录，不再打包已经打包过【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。的模块。

举一个简单的例子：【原创不易，请尊重版权】

// a.js
import $ from "jquery"
console.log($)

这是我的项目文件。它有一个依赖，jque本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】ry。现在，我希望每次打包的时候把jqu本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ery和项目文件分开来打包，或者说，第一著作权归作者所有，禁止商业用途转载。【本文受版权保护】次两个都打包，后面就永远只打包项目文件。

要实现这个，需要两步走：【转载请注明来源】

// tool.js 打包程序
import webpack from "webpack"
import gulp from "gulp"
// 第一步，把依赖包先打包好，暂时跟a.js没啥关系
webpack({
  entry: {
    vendor: ["jquery"], // 这里是依赖列表
  },
  output: {
    path: ".",
    filename: "a.vendor.js",
    library: "aVendor",
  },
  plugins: [
    new webpack.DllPlugin({
      path: __dirname + "/manifest.json",
      name: "aVendor",
      context: __dirname,
    }),
  ],
}).run((error, handle) => {})

// 第二步，打包项目文件，但是不打包依赖
let compiler = webpack({
  entry: "./a.js",
  output: {
    path: ".",
    filename: "a.bundle.js",
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
       manifest: require(__dirname + "/manifest.json"),
    }),
  ],
})
compiler.run((error, handle) => {})
// 第三步，监听文件变动，一旦文件有改动，就直接运行第二步产生的
compilergulp.watch("./a.js", event => compiler.run((error, handle) => {}))

上面的代码是最简单演示代码，但是基本上把【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】问题说清楚了。注意上面代码中着色的部分，转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】每种颜色对应的值必须相等，特别是mani未经授权，禁止复制转载。【原创不易，请尊重版权】fest文件，它是打包时不再打包依赖的依【版权所有，侵权必究】【原创不易，请尊重版权】据。

在html中，需要引入两个js文件，一个未经授权，禁止复制转载。原创内容，盗版必究。是a.vendor.js另一个是打包出来【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。的a.bundle.js，manifes【作者：唐霜】原创内容，盗版必究。t文件没用（仅在compiler.run【本文受版权保护】未经授权，禁止复制转载。的时候会被用到），前面一个放在前面引用。【作者：唐霜】著作权归作者所有，禁止商业用途转载。这和很多大型应用的实践相符，他们也是把依【关注微信公众号：wwwtangshuangnet】【本文受版权保护】赖单独出来引用。而且在网络上传输的时候，【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】a.vendor.js可以被浏览器缓存，本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】当更新了项目代码之后，只需要上传a.bu转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netndle.js即可。

通过这种方式，我们可以大大节约开发时的等【本文受版权保护】【原创不易，请尊重版权】待时间了。

2017-02-28 11778 webpack