最近新启了一个项目，由于之前没有从零新建过项目，在项目的配置上花了很长时间。简单记录下配置中遇到的最大的坑：webpack + gulp + babel-loader 的问题。 先说一下配置的需求，整个项目工作流主要用 gulp 管理。引入 webpack 只用来打包压缩 js…

随着前端应用包含的模块数量日益增长，代码打包的耗时也越来越长。公司很多项目打包耗时超过了10秒，对于一般人来说超过10秒的等待是比较难受的，虽然后续增量编辑的速度很快。于是我想结合实际开发环境提升一下首次打包的速度。 1. 实际开发环境 许多需求只涉及到js模块的修改，并不涉及…

而关于如何应用该路径并没有说清楚... 这个最终静态资源访问路径在使用html-webpack-plugin打包后得到的html中可以看到。所以publicPath设置成相对路径后，相对路径是相对于build之后的index.html的，例如，如果设置publicPath: '…

之前你可能已经听说过这个叫webpack的很酷的工具，如果你没仔细了解过这个工具，你可能会有些困惑，因为有人说它像 Gulp 之类的构建工具，也有人说它像 Browserify 之类的模块管理工具，如果你有去仔细地了解一下，你可能还是会不明白到底是怎么一回事，因为官网上把web…

近年来前端技术如雨后春笋般蓬勃发展，我们也在这个潮流下不断地学习、成长。前端技术的不断发展，给我们提供了许多的便利。例如：JSX的出现为我们提供了一个清晰、直观的方式来描述组件树，LESS/SASS的出现提高了我们书写css的能力，AMD/CommonJS/ES6 的出现为我们…

webpack 原理解析

本文主要描述的是面对一个即将上线的应用，使用 webpack2 打包时，可能涉及的一些配置方案。

... 1. mode mode 配置项是 webpack4 新增的配置项，这个配置项是必须的。 当人对于初学者来说，对于 webpack 的优化还有一段距离，首先我们大体了解一下即可。 它还有很多其他的优化默认值，但是效果可能并不美好，因为它针对的某些特定的大型项目，而我们只…

... 它每一步大体是什么意思。 配合其官网的首页图不难理解其含义：一切文件如：JavaScript 、CSS 、 SASS 、 IMG/PNG等，在 Webpack 眼中都是一个个模块，通过对 Webpack 进行配置，对模块进行组合和打包。经过 Webpack 的处理，最终…