写在前面的话
阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，如果你对webpack感兴趣，本文中有一个贯穿始终的例子，如果你能把这个例子自己动手写一次，写完以后你会发现你已明明白白的走进了Webpack的大门。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
//一个常见的Webpack配置文件 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: __dirname + "/app/main.js", output: { path: __dirname + "/build", filename: "[name]-[hash].js" }, module: { loaders: [ { test: /\.json$/, loader: "json" }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }, { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?modules!postcss') } ] }, postcss: [ require('autoprefixer') ], plugins: [ new HtmlWebpackPlugin({ template: __dirname + "/app/index.tmpl.html" }), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin(), new ExtractTextPlugin("[name]-[hash].css") ] } |
什么是WebPack，为什么要使用它？
为什要使用WebPack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出很多好的实践方法
- 模块化，让我们可以把复杂的程序细化为小的文件
- 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别
- Scss，less等CSS预处理器
- …
这些改进确实大大的提供了我们的开发效率，但是利用它们开发的文件需要进行额外的处理才能让浏览器识别，手动处理非常复杂，这就为WebPack类的工具的出现提供了需求。
什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些预设，打包为合适的格式以供浏览器使用。
WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种工具，能够优化前端的工作流程，而WebPack是一种模块化的解决方案，Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最好打包为一个浏览器可识别的JavaScript文件。
如果实在要把二者进行比较，Webpack的处理速度更快更直接，能打包更多不同类型的文件。
开始使用Webpack
初步了解了Webpack工作方式后，我们一步步的开始学习使用Webpack。
安装
Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack sample progect），在终端中转到该文件夹后执行下述指令就可以完成安装。
|
1 2 3 4 |
//全局安装 npm install -g webpack //安装到你的项目目录 npm install --save-dev webpack |
正式使用Webpack前的准备
- 在上述练习文件夹中创建一个package.json文件，这其实是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务。在终端中使用
npm init命令可以自动创建这个package.json文件
1npm init
输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。 - package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包
12// 安装Webpacknpm install --save-dev webpack - 回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和所写的JavaScript模块，public文件夹用来存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件以及一个index.html文件）。在这里还需要创建三个文件，index.html 文件放在public文件夹中，两个js文件（Greeters.js和main.js）放在app文件夹中，此时项目结构如下图所示
index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js）
|
1 2 3 4 5 6 n-num crayon-striped-num" data-line="crayon-5812b3dd93ef2466415908-2">2 3 4 5 6 ֑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，如果你对webpack感兴趣，本文中有一个贯穿始终的例子，如果你能把这个例子自己动手写一次，写完以后你会发现你已明明白白的走进了Webpack的大门。
什么是WebPack，为什么要使用它？为什要使用WebPack现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出很多好的实践方法
这些改进确实大大的提供了我们的开发效率，但是利用它们开发的文件需要进行额外的处理才能让浏览器识别，手动处理非常复杂，这就为WebPack类的工具的出现提供了需求。 什么是WebpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些预设，打包为合适的格式以供浏览器使用。 WebPack和Grunt以及Gulp相比有什么特性其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种工具，能够优化前端的工作流程，而WebPack是一种模块化的解决方案，Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。 Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最好打包为一个浏览器可识别的JavaScript文件。
如果实在要把二者进行比较，Webpack的处理速度更快更直接，能打包更多不同类型的文件。 开始使用Webpack初步了解了Webpack工作方式后，我们一步步的开始学习使用Webpack。 安装Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack sample progect），在终端中转到该文件夹后执行下述指令就可以完成安装。
正式使用Webpack前的准备
index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js） |
