webpack是时下十分流行的编译和打包工具，它提供一种可扩展的loader的方式，简单的配置，便可以编译打包各类型的文件，包括js、css、image、font、html，以及各种预编译语言都不在话下。
一、回顾与思考
在上一节的【入门：十分钟自动化构建】中我们讲解了如何用gulp去搭建一个工作流。我们认识到gulp是一个流程管理工具，以单个任务为基础单元，组合成为一套完整的工作流，而且gulp还有很多的以gulp-*格式命名的工作模块，用来处理各种资源文件，如果没有看过上一节内容的同学，建议先回去看过，再往下阅读，因为本节内容是跟上一节的知识点紧密联系的。
这一节我们会讲解如何构建具备版本管理能力的项目，什么是版本管理能力？不是什么svn或者branch，我们看这样一个场景来帮助理解：
你用上次搭建的工作流开发了一个网站，然后上线。
第二天打开发现有bug，心想尼玛赶紧趁着老板没发现修复一下。
改完代码，打包，发布，一气呵成，完美。
然而十分钟以后老板让你去一趟办公室，打开页面跟你说有个bug。心里一抽，一看！我勒个去，这坑爹的缓存啊。。。
怎么去解决这个缓存？，或者说，怎么保证我上线一个新版本，可以完完全全地替代旧版本？这就是版本管理。
这问题有很多解决方法，包括手动打个戳啊什么的，像src="a.jpg?201608062315"，这确实可以解决，但是如果一次更新的东西很多，你压根改不过来。
gulp能帮我们做这事吗？可以，麻烦，有兴趣的同学可以自行搜索资料。有没有简单点的套路？有的，webpack天然支持这一功能。接下来我们就介绍如何用webpack来搭建这么一套工作流。
二、webpack
webpack的用法，我们简单介绍一下。跟gulp一样，webpack也是写好配置文件才能开始工作。
全局安装webpack
npm install webpack -g记得养成好习惯，也本地安装一下哦
npm install webpack --save-dev顺带我们把接下来要用到的几个loader一起安装了：
npm install style-loader css-loader sass-loader swig-loader --save-dev这里的*-loader作用跟gulp-*差不多，就是一些编译用的模块。
紧接着我们在根目录下，新建一个webpack.config.js配置文件，我们直接来看代码：
var path = require('path')
module.exports = {
entry: {
Index: ['./src/js/index.js']
},
output: {
path: path.resolve(__dirname, './dist/static'),
publicPath: 'static/',
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.scss', '.swig']
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.scss$/,
loader: 'style!css!sass'
},
{
test: /\.swig$/,
loader: 'swig'
}
]
}
}这里大致分为四部分的内容：
entry
入口文件，也就是一切工作的起点，你可以将整个web应用都最终打包成一个js文件，那你只需要定义一个入口，而如果你希望对多个页面独立开来，你需要定义多个入口，最终在不同的页面引用不同的js。一个entry对应生成一个bundle。
output
定义打包输出的配置：
- path是打包文件的存放路径，按上面的配置，意味着我们待会打包的文件是要放在
dist/static下的； - publicPath是定义文件被打包后的url前缀的，效果是
原文发布时间：2016-08-16
原文作者：Jack_Lo
本文来源掘金如需转载请紧急联系作者
