解决 js、css 的依赖问题。（以前经常因为引入顺序问题，导致 css 没起作用或某个js变量找不到） webpack 原生只支持 js、json 两种模块类型，所以需要 loader 把其他类型的文件转化成有效的模块，并可以添加到依赖图中。 开启 dev-server 后默…

对于前端同学来说webpack应该一点不陌生，现在应该大部分的工程都在使用webpack来进行构建。 现在很多的框架都已经提供相应的脚手架命令行工具，直接执行之后就会生成对应的模板项目。 但是我们仍然需要知道webpack的工作原理到底是什么？知道之后也方便我们对现有的项目进行…

前端发展好快的。 越来越多的思想和框架都出来了。 就是为了提高开发的效率。 比如ES6需要通过babel转成ES5才能在浏览器上面运行吧。 ... 这些思想和框架，都是有构建需求的。 webpack是一个模块打包工具，但是只能打包js，所以如果要打包其他的比如css，图片之类的…

这里会有选择是 React/Vue/JavaScript，我们统一都先选择 JavaScript。选完后会在项目的根目录下新建一个 .eslintrc.js 配置文件 @babel/parser 是 Babel 中使用的 JavaScript 解析器。

字面意思是摇树，项目中没有使用的代码会在打包的时候丢掉。JS 的 Tree Shaking 依赖的是 ES6 的模块系统（比如：import 和 export） 命令行运行 webpack 打包后，打开打包后生成的 /dist/app.bundle.js 文件。查找我们 a()…

随着单页应用发展的越来越庞大，拆分js就是第一要务，拆分后的js，就可以根据我们需求来有选择性的加载了。 这里就添加了一句，chunkFilename而已，chunkFilename的作用就是用来给拆分后的chunk们起名字的配置项。 还是只打包出了一个main.js，毫无变化…

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

经常会有群友问起webpack、react、redux、甚至create-react-app配置等等方面的问题，有些是我也不懂的，慢慢从大家的相互交流中，也学到了不少。 ​ 今天就尝试着一起来聊聊Webpack吧，旨在帮大家加深理解、新手更容易上路，都能从0到1搭建配置自定属于…

本文已收录在Github github.com/Geekhyt，欢迎Star。 从头发的浓密程度和干练的走路姿势我察觉到，面前坐着的这位面试官也是一把好手。我像以往一样，准备花3分钟的时间进行自我介绍。在此期间，我的目光被16寸的MacBook Pro所吸引，这次的自我介绍我做…