刚接触前端时, 所有静态资源 CSS 图片和 JS 都是手动引入 html 页面中, 这并没有什么不好, 想要什么就引入什么嘛另外, 所见即所得, 开发好的项目文件直接就可以上传服务器, 很方便, 因此这样的开发方式一直持续到前不久, 也就是开始正式使用 webpack 之前
渐渐地, 我开始感觉到 jQuery 虽然很好用, 但是维护起来不是很方便, 就是所谓的开发一时爽, 维护起来真要命杂乱无章的代码混在一个文件中, 想要寻找某个功能的代码很是困难, 要是分开成多个文件引入, 又会造成 HTTP 请求数过多的问题
于是, 我后来选择了 vue
使用 Vue 之后的一个好处就是, 我不再需要手动去操作 DOM 了, 直接可以将 JS 变量放到 HTML 页面中, 数据会自动绑定, 这对于开发者来说非常方便, 我们只需要把重点放到对数据的处理上就可以了, 这样代码也精简了很多
再后来, 我发现有些代码在很多地方都要用到, 同一个项目中, JS 我可以通过定义方法来复用, CSS 可以通过定义类名来复用, 可是对于 HTML, 我却无能为力, 只能通过复制粘贴的方式
所以, 我选择了 Vue 组件
但是问题接着又来了, 我发现 Vue 组件虽然解决了 HTML 的复用问题, 但实际上只不过是将 HTML 和 JS 组合在了一起, CSS 依然游离在外, 在同一项目中确实都实现了复用, 但是当其他项目要使用它时, 还得把游离在外的 CSS 代码复制粘贴过去, 这样久而久之自然也是难以忍受了
幸运的是, 单文件的 Vue 组件正好解决了这个问题我们可以将 HTMLCSS 和 JavaScript 代码放在同一个. vue 文件当中, 强大的 Webpack 可以将这些代码分离出来, 并分别与其他同类型的代码打包到一起而我们不需要管 Webpack 内部是如何运作的, 只需要知道单文件组件形式确实会为我们的工作带来极大的便利性
在 CSS 方面, 习惯使用 Less 来写 CSS 代码的我, 明显体会到 Less 模块化所带来的便利性, 一个 Less 文件可以通过引入其他多个 Less 文件, 最后只需将这一个 Less 文件所编译成的 CSS 文件引入页面即可之前我使用的 Less 编译工具一直都是 koala, 它是一个可视化的编译软件, 可以进行 Less 代码的编译以及 CSS 和 JS 代码的压缩正因为 Less 很好用, 并且节省了 HTTP 请求数, 然后我就在想, 要是 JS 也能像 Less 一样模块化引入并且打包成一个 JS 文件就好了
正因为有着组件化模块化和单文件引入的强烈需求, 我开始尝试寻找着同时具备这些功能的打包工具, 而在尝试过 GruntGulpWebpack 和 Parcel 之后, 最终我选择了 Webpack
那么, 为什么我会在这些工具中最终选择 Webpack 呢?
首先, Grunt 和 Gulp 只能算是构建工具, 就是将一些 CSS 和 JS 文件分别压缩合并成单个文件, 当然也具有一些编译功能, 比如 Less 和 Sass 的编译 ES6 到 ES5 的编译等等但是 Webpack 不仅具有它们所具备的这些编译压缩合并功能, 同时还具备模块化开发和组件式开发等优点, 在目前流行的前端框架 React 和 Vue 中也得到很好的支持
然后再说说 Parcel, 它一度被人认为是未来最有可能替代 Webpack 的前端打包工具, 主要原因是它几乎零配置, 而且打包入口也不仅仅只是 JS, 另外其打包速度也要比 Webpack 快然而, 虽然 Parcel 相比 Webpack 似乎具有更多优势, 但它毕竟还不够成熟, 没有 Webpack 庞大的社区, 一旦遇到问题很难在网上快速找到相应解决办法并且最近 Webpack 4.0 已经发布, 配置相比之前简化了一些, 也增加了一些新功能, 所以我们完全有理由相信 Webpack 在未来也会越来越好
因此, 在经过一番体验和对比之后, 最终我选择了 Webpack
最后总结一下 Webpack 的主要优势:
模块化开发 (import,require)
预处理 (Less,Sass,ES6,TypeScript)
主流框架脚手架支持 (Vue,React,Angular)
庞大的社区 (资源丰富, 降低学习成本)
初识 Webpack, 如有不对之处, 欢迎指正, 也欢迎一起学习, 一同进步!
来源: http://www.jianshu.com/p/9f2d0b64f3b8