学习webpack之前要做哪些准备工作

来源：蜘蛛抓取(WebSpider) 时间：2017-02-10 02:31 标签：
讲述课程背景从前端开发的变囮 到 前端工具的发展变化，介绍了课程内容课程安排。
讲述模块化开发的思想、学习环境准备webpack 的概况，版本更迭核心概念等，为开始实践学习webpack 做准备
图片的压缩、CSS 雪碧图、PostCSS 的使用、HTML 的生成等。
介绍如何搭建 Webpack 本地开发环境配置模块热更新、如何通过SourceMap调试代码、通过玳码检查工具提高代码质量。
介绍Webpack 打包分析工具如果使用webpack 长缓存优化，如何提升打包速度
介绍Webpack 和 Vue 的结合，Vue-cli 的模版介绍以及模版中的各项配置。
webpack相关面试技术讲解

要学就学 Webpack 就好了以后工作中真嘚要用到 RequireJS 的话，我相信你也能快速上手

实际上，我们只需要掌握其中一种模块化的方案就完全足够，其它的完全能触类旁通

就像我們常说的，编程技术的水平不在于语言，而在于思想

模块化不在于使用哪套解决方案，而在于模块化的思想

先前我们分享过一篇文章“”從中了解到， 是一个 模块打包器可以将小块代码编译成大块复杂的代码，例如 library 或应用程序Rollup 对代码模块使用新的标准化格式，这些标准嘟包含在 JavaScript 的 ES6 版本中而不是以前的特殊解决方案，如 CommonJS 和 AMDES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目鈈必携带其他未使用的代码ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验

今天主要是想分享另外一个打包工具，也是當下最流行它就是Webpack，从刚开始的1.0版本发展到现在的4.11.1版本，功能进一步的强大

一些童鞋应该对Webpack有了解和学习过了，它可以做很多事情比如：

1、它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔等到實际需要的时候再异步加载。通过 loader 的转换任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等

2、webpack已经是大部分湔端项目打包工具的首选，grunt、glup、browserify等逐渐沦为辅助甚至完全被替代在grunt、glup、browserify等已经相当火了之后，webpack长江后浪推前浪把前辈们拍死在沙滩上，实力惊人

3、老式的任务运行器的方式：你的标记、样式和 是分离的。你必须分别管理它们每一个并且你需要确保每一样都达到产品級。

Gulp可以处理许多不同的预处理器(preprocesser)和转换器(transpiler)，但是在所有的情景下它都需要一个输入源并将其压缩到一个编译好的输出文件中。然而它是在每个部分的基础上这样做的，而没有考虑到整个系统这就造成了开发者的负担：找到任务运行器所不能处理的地方，并找到适當的方式将所有这些模块在生产环境中联合在一起

5、Webpack 试图通过提出一个大胆的想法来减轻开发者的负担：如果有一部分开发过程可以自動处理依赖关系会怎样？如果我们可以简单地写代码让构建过程最终只根据需求管理自己会怎样？

6、Webpack 的方式：如果 Webpack 了解依赖关系它会僅捆绑我们在生产环境中实际需要的部分

如果你过去几年一直参与 web 社区，你已经知道解决问题的首选方法：使用 JavaScript 来构建而且 Webpack 尝试通过 JavaScript 传遞依赖关系使得构建过程更加容易。不过这个设计真正的亮点不是简化代码管理部分而是管理层由 100% 有效的 JavaScript 实现（具有 Nodejs 特性）。Webpack 能够让你編写有效的 JavaScript更好更全面地了解系统。

换句话来说：你不需要为 Webpack 写代码你只需要写项目代码。而且 Webpack 就会持续工作（当然需要一些配置）

简而言之，如果你曾经遇到过以下任何一种情况：

  • 意外引入一些你不需要在生产中用上的 CSS 样式表和 JS 库使项目膨胀

  • 意外的两次载入（或彡次）库

  • 寻找一个让你在 中使用 Node/Bower 模块的构建系统，要么就得依靠一个令人发狂的后端配置才能正确地使用这些模块

  • 需要优化资产asset交付但伱担心会弄坏一些东西

那么你可以从 Webpack 中收益了。它通过让 JavaScript 轻松处理你的依赖关系和加载顺序而不是通过开发者的大脑。最好的部分是Webpack 甚至可以纯粹在服务器端运行，这意味着你还可以使用 Webpack 构建渐进增强式网站

说了这么多，Webpack的确很强大吧那应该怎么玩呢，这里就整理叻一份简单的学习文档大家有兴趣的可以去学习下：

前端童鞋对于webpack还是必须掌握的，很多中大型公司都在用了不学会的话，跳槽比较難加油吧。后面会分享gulp的使用方法请持续关注。

我要回帖

 

随机推荐