| title |
|---|
Webpack 闲聊 |
webpack 官网对自己的定位是：
webpack is a module bundler for modern JavaScript applications.(webpack 是一个现代 JavaScript 应用的模块儿加载器)
初看，似乎也没什么，不就是做模块儿打包的吗。但是它有个核心概念非常厉害：前端一切资源皆模块儿。图片文件，字体文件，CSS文件，js 文件......
这就是 webpack 厉害之处：你只需要把你的程序的入口文件告诉它，它就能把你整个项目依赖的各种资源打成一个包给你。然后放到你想要放到的目录中去。为你解决复杂的依赖关系管理。
webpack 是前端的打包工具，但是它归根揭底是一个 node 包，是一个用 Nodejs 写的程序。所以它的工作环境是 nodejs, 工作在前端的开发阶段。而不是发布后。这与requireJS 和 seajs 有本质的区别。意识到这一点非常重要。
webpack 是一个模块儿加载器，它可以递归分析，形成一个依赖树，然后打包所有的依赖模块形成少数量的包。通常情况下只形成一个。然后通过浏览器去加载。
你可以完全通过配置参数来使用webpack 来完成你想要完成的工作。首先我们需要了解它的四个核心概念。分别是：entry, output, loaders, plugins.
webpack 为你的项目形成一个包含所有依赖的依赖树，这个依赖树的入口点被称为 entry。你需要通过配置来告诉 webpack 你的程序的入口在哪里。
webpack 在最终打包完成之后，会把打包好的文件按照你的要求放到某个文件夹内。output 就是用来填写你的各种要求的。你的这些要求可能包括：放到哪个目录，最终打包出来的文件叫什么名字等等。
webpack 把整个世界上的一切都理解成了模块儿。那么它是如何处理各种各样的模块儿的呢？答案就是：加载器。webpack 为每一种模块儿都赋予一个加载器，在加载某一种模块儿的时候，就用对应的模块儿去处理，处理成 webpack 内部需要的格式，最后交由 webpack 再统一去处理。为什么要这样去处理 ？因为虽然 webpack 把每一个文件（.css, .html, .scss, .jpg, .eot ....) 当作一个模块儿，但是 webpack 它自己只能理解 javascript。
可以想象成 webpack 是一个大的工厂，然后这个工厂有好多不同类型的进料口来提供原料，那个进料口都有对应的处理器，把不同的原料处理一下，交给工厂的核心去加工。
Loaders 执行的是对每一个文件进行基础的转化，Plugins 是用来在编译和打包阶段进行定制化处理的工具，比如：打包完之后对代码进行压缩，再比如最后打包的文件过大，进行分片等等。 webpack 的插件系统是非常的灵活和强大。