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

本文来源掘金如需转载请紧急联系作者