打包工具

babel解析js是非常耗时的，想象一下，假如我们有100个js文件，某一时刻只修改了其中一个，构建的时候还是会对这100个文件进行解析，这显然是不够高效的。这时候我们可以给babel加一个缓存，再次构建时，对那些没有发生修改的js文件，直接从缓存中读取解析结果而不需要重新解析…

最近在阅读webpack源码的时候，发现在webpack的编译器（compiler.js）里用到了tapable，于是查资料学习了以下，这里做一个学习记录。 异步钩子分为异步并发（Parallel）执行和异步串行（Series）执行，从hook名字我们就可以看出来。

webpack只能处理js模块，在js中加载图片模块时需要借助file-loader。如 url-loader可以把较小的图片转化成base64数据，从而减少对图片资源的http请求。同时打包文件也会变大； 当图片大小超过设置的限制（limit）时，默认采用file-loade…

index 和 other 分别作为两个入口文件，且都引用了a，b两个模块。我们可以使用webpack的optimization配置抽离a，b到单独的模块，index 和 other 只需要引入抽离的公共模块即可，不需要再单独引入a，b。配置如下： 此刻，如果我们还引用了第三方…

实际开发过程中，跨域问题是一个老生常谈的问题了，从webpack角度出发可提供以下三种解决方案。话不多说，直接上干货

@babel/preset-env设置useBuiltIns："entry"时，需要手动引入polyfill，设置useBuiltIns："usage"时，polyfill作为全局对象引入，容易造成全局变量污染。@babel/plugin-transform-runtime可以…

项目更目录下新建webpack.config.js或者webpackfile.js。配置如下： 在css-loader插件执行之前采用less-loader编译less成css。配置webpack解析项目中.less文件如下： 在css-loader插件执行之前采用sass-l…