这是最后一篇单独讲webpack的知识，前面文章我们一开始弄懂了为什么要叫学webpack，以及webpack是什么。然后，为了讲的东西更好理解，我们先学会了搭一个本地服务器，接着先后重点讲了webpack的两大利器，Loaders和插件，用实例演示了怎么使用它们，再然后，就到这里了......

我认为有关webpack的使用有三个功能你必须学会，因为这三个功能在所有使用webpack做构建的项目中基本都是要用到的，用，是因为会提升页面加载效率，会让你的代码看起来更整洁更好维护，让你不会因为代码有缓存而烦恼。下面就来一一讲一下这三个问题。

一、如何压缩JS文件：

我们的项目代码在上传到服务器之前，我们需要将项目代码打包，打包后的代码我们希望是经过压缩处理了的。然而，webpack有一个内置插件UglifyJsPlugin，它能帮我们压缩最终生成的那个JS文件。

下面就相当于就是讲一个内置插件的使用了（尽管在前面的文章中我们已经讲过了，就当复习一次）

内置插件不需要安装，直接在配置文件的plugins参数中实例化一下，当然，别忘了在配置文件头上引入webpack。实例化是这样的：

new webpack.optimize.UglifyJsPlugin()

然后再运行打包命令，最终生成出来的文件是压缩了的，像这样：

二、将CSS单独打包成一个文件：

还记得我们在前面的文章中，讲过两个CSS的Loaders，最终将样式文件以style标签的形式嵌入到html文件中，这里我们需要将它以一个单独的样式文件打包出来。正好，webpack有一个第三方插ExtractTextPlugin，可以帮我们做到。按照第三方插件的使用流程：

安装：

npm install --save-dev extract-text-webpack-plugin

配置-先引入：

var ExtractTextPlugin = require('extract-text-webpack-plugin');

配置-实例化：

new ExtractTextPlugin({ filename: 'main.css', disable: false, allChunks: true })

配置-Loaders：

运行打包命令：

npm start

这样在public目录下就生成了一个单独的样式文件main.css：

三、webpack支持缓存处理：

为了防止文件更新之后用户无法获取最新代码，在webpack的api中在文件输出的时候有hash配置选项，默认为16位的长度，可以这么用，在配置文件中将输出的两个依赖文件（main.js，main.css）的名称处理一下。像下面这样加一个5位的hash随机代码。

输出JS文件：

打包css文件：

同样运行打包命令后，最终项目结构是这样的：

写在最后的总结：

到这里有关webpack打包工具的认识和使用，我们就写完了，当然，如果要深究，不仅是webpack，任何一个技术问题都是可以写个长篇大论。暂时，我们还是把使用和项目实践放第一位，就像知道什么学习它，和怎么使用它等，所以，在下次给大家写react的知识时，我会结合项目再一次提到webpack。请期待一下吧！

完整代码下载：

https://github.com/wenpingzheng/webpack_react.git

文章如有什么讲的不对的对方，欢迎留言指正！！！

短内容，说完整事，哪怕只读一篇也能学知识。

如果小郑子的文章对您有点点帮助，请关注小郑子的号，谢谢您的鼓励！