webpack 入门指南

webpack，一个模块打包机。

学习新东西的时候第一件事不是看官方文档，而是知道它是什么，能解决什么问题，怎么使用。

相比jQuery和vue而言，webpack不能算是一个框架，更像是一个工具，由于它不参与你的项目业务代码。经过配置依赖关系图和控制配置信息，本来复杂冗余地项目文件的引用瞬间变得轻松简单。

webpack require anything的方式是经过各类各样的loader及plugins实现的，全部的文件均可以视为模块，你只须要配置好配置文件，执行webpack -p命令后，一切都是那么美好。

顺带说一下，开发过程当中你还可使用webpack-dev-server，构建服务器环境，自动编译，自动刷新，解放你的F5.那种酸爽，谁用谁知道。我说的是工程项目，一两个文件在服务器环境里跑，要么用webstorm，要么用browser-sync,sublime配置失焦保存便可。

webpack其余都不怎么重要，配置文件最重要，或者换一句话说，配置信息的那个对象很重要，那是核心。

野路子讲究快准狠，拿到一份webpack的配置文件，查询api说明书，基本上就能入门了。

webpack配置文件是经过config命令指向的，默认值是项目根目录下的webpack.config.js文件。
新建打开以后，写下：
var config = {};
module.exports config;

因而config这个对象即成为webpack的核心配置承载体了。为了行文方便我就直接用config来代指webpack配置了。

config有如下几个直接子属性：

entry 入口配置，这里的程序的起点，配置上页面的js文件便可，字符串，字符串数组，字符串对象数组根据你是SPA仍是其余多页而定。

output 出口配置 这里配置打包以后的文件存储位置，这个属性的属性值也是一个对象，output.path定义存储位置，output.filename定义打包后的文件名，也能够具体化存储路径。

external 外部依赖的声明，好比外部经过cdn引入的jQuery，bootstrap之类的，在这里配置后便可以看成全局模块全局使用了

resolve 解析说明，通常用来自定义一些解析规则，好比项目目录别名的配置，不用在点点杠的翻目录了，这个是经过alias配置实现。

modules 模块信息，用来放各类loader

plugins 插件信息，用来放各类插件

熟悉这几个config的属性webpack基本上就算入门了。碰到不熟悉的地方仍是针对性地找官方文档查对应的API。