好东西，总是要使用的。

webpack是什么工具

webpack is a module bundler

正如官网对webpack的描述，它是一种模块化加载器，当然也不仅仅限于此。某种程度上来说，可以代替某些gulp的功能，至少有些还是无法替代的。在webpack中所有的资源都会被视作模块来处理，为了应对这样的情况，webpack有对应的loader机制来处理，另外shim，plugins，和其他构建工具，一样一样的，更多的细节，需要你在实际的应用中慢慢去体会了。

webpack的使用方法

安装：npm install webpack –verbose –save-dev

webpack认为一个项目（或者一个页面），总有一个入口文件，就像C语言中总有一个main函数一样。假设，我们创建两个文件./mian.js和./query.js，并且将main.js做为我们项目的入口文件。

query.js

main.js

创建一个webpack.config.js文件

在你的终端上运行webpack即可。

webpack配置详解

entry：

entry属性做为可配置的入口，比如上面所写的./main.js。entry有三种写法，每一个入口可以称之为一个chunk。

• 如果为字符串，只会打包一个顺序依赖的模块，输出则根据output配置而定。
• 如果为数组，只会打包一个顺序依赖的模块，合并到最后一个模块时导出，输出则根据output配置而定。
• 如果为对象，则会根据入口打包多个顺序依赖的模块，key名会根据在output的配置输出。

output：

输出规则，在此对象中设置。

• path 设置输出的文件路径
• filename 设置输出文件名，filename可以有多种配置，比如main.js，[id].js，[name].js，[hash].js等
• publicPath 设置资源的访问路径
• library 设置模块导出的类名
• libraryTarget:’umd’ 设置模块兼容模式
• umdNamedDefine:true 同上

devtool：

将devtool设置为source-map，在开发调试阶段非常有用，它的模式非常多，我有搞的比较晕。

loader：

loader机制应该是webpack中非常重要的部分了，它是一系列资源的最终执行者。一般情况下，你可以访问：webpack loader来访问可用loader列表。

比如现在我想将.html类型的文件，当做一个模块来载入。

每一个loader都可以用一个对象来描述，test是你的匹配规则，loader是你要载入的loader，exclude是你在执行规则是想忽略的目录。

plugins：

webpack的插件机制也非常的重要，其内置了多种插件，比如混淆，压缩等等。插件列表可以访问：list of plugins。

正常情况下可以使用官方自带的插件：

当然，我们也可以引入第三方插件，使用你的npm install吧。

resolve：

此配置可以对一些常用模块设置别名，比如a.js放置在./src/module/address/中，每次载入模块需要var a = require(‘./src/module/address/a’);名字非长，如果设置别名了，只需要var a = require(‘a’)；

还可以设置访问路径，以及模块载入后缀。

main.js

创建一个webpack.config.js文件

在你的终端上运行webpack即可。

webpack配置详解

entry：

entry属性做为可配置的入口，比如上面所写的./main.js。entry有三种写法，每一个入口可以称之为一个chunk。

• 如果为字符串，只会打包一个顺序依赖的模块，输出则根据output配置而定。
• 如果为数组，只会打包一个顺序依赖的模块，合并到最后一个模块时导出，输出则根据output配置而定。
• 如果为对象，则会根据入口打包多个顺序依赖的模块，key名会根据在output的配置输出。

output：

输出规则，在此对象中设置。

• path 设置输出的文件路径
• filename 设置输出文件名，filename可以有多种配置，比如main.js，[id].js，[name].js，[hash].js等
• publicPath 设置资源的访问路径
• library 设置模块导出的类名
• libraryTarget:’umd’ 设置模块兼容模式
• umdNamedDefine:true 同上

devtool：

将devtool设置为source-map，在开发调试阶段非常有用，它的模式非常多，我有搞的比较晕。

loader：

loader机制应该是webpack中非常重要的部分了，它是一系列资源的最终执行者。一般情况下，你可以访问：webpack loader来访问可用loader列表。

比如现在我想将.html类型的文件，当做一个模块来载入。

每一个loader都可以用一个对象来描述，test是你的匹配规则，loader是你要载入的loader，exclude是你在执行规则是想忽略的目录。

plugins：

webpack的插件机制也非常的重要，其内置了多种插件，比如混淆，压缩等等。插件列表可以访问：list of plugins。

正常情况下可以使用官方自带的插件：

当然，我们也可以引入第三方插件，使用你的npm install吧。

resolve：

此配置可以对一些常用模块设置别名，比如a.js放置在./src/module/address/中，每次载入模块需要var a = require(‘./src/module/address/a’);名字非长，如果设置别名了，只需要var a = require(‘a’)；

还可以设置访问路径，以及模块载入后缀。