例如这样就可以直接使用React的压缩版本，每次构建时不必再次解析。还可以通过别名引用文件，而不必再打长长的引用路径： 但这样的缺点是会无法使用Tree-Shaking，所以一般对React这种整体性比较强的库使用比较好，而像lodash这样的工具库还是使用Tree-Shaki…

Webpack是现在主流的功能强大的模块化打包工具，在使用Webpack时，如果不注意性能优化，有非常大的可能会产生性能问题，性能问题主要分为开发时打包构建速度慢、开发调试时的重复性工作、以及输出文件质量不高等，因此性能优化也主要从这些方面来分析。本文主要是根据自己的理解对《深…

我的博客在曾经的很长一段时间以内,我都是将博客静态页面托管到Github pages进行渲染的,但是大家都知道,我们国内访问GitHub如果不挂翻墙的话,访问速度非常慢☹️.虽然我的博客一直以来都没有太多的访问量,但是作为一个追求极致体验的人,怎么忍受得了呢 🤟. 打开htt…

自己配置过webpack的人应该都知道，webpack真的好复杂，一开始做项目都是拿别人现成的做做小修改，但是别人的终究没有自己配的舒服。所以我打算写这篇文章，从我的配置中带大家了解webpack配置，简化读webpack官方页面的复杂度。 在上面的示例中，我们通过 outpu…

相信大家使用webpack已经很熟练了，他通过一个配置对象，其中包括对入口，出口，插件的配置等，然后内部根据这个配置对象去对整个项目工程进行打包，从一个js文件切入(此为单入口，当然也可以设置多入口文件打包),将该文件中所有的依赖的文件通过特定的loader和插件都会按照我们的…

脚手架, 源自于建筑行业, 通俗的讲就是一个项目搭建的工具. 比较熟知的有 vue-cli create-react-app 等等, 这类工具通常以 xxx-cli 命名, 不废话 先甩一个 npm 战绩 小哥哥, 看看这数据, 你到底要还是不要嘛... 创建 bin 目录和 …

三篇长文带你解锁 Webpack ，希望读完这三篇文章，你能够对 webpack 的各项配置有一个更为清晰的认识。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每…

通常我们的项目会有开发环境和生产环境，而开发环境我们配置的目标是构建更快，模块热替换，能从chrome控制台报错信息对应的源码的错误处(source map)等。生产环境我们更加关注chunk分离，缓存，安全，tree shaking等优化点。 当然对于开发和生产环境的配置文件…

webpack今年推出的4这个版本就一直关注很学习它，webpack4这个版本借鉴了parcel的零配置，打包速度变得更快，值得大家去跟进学习。 在webpack4之前，提取公共代码都是通过一个叫CommonsChunkPlugin的插件来办到的。到了4以后，内置了一个一模一样…