webpack入门
一、安装
1、安装nodeJS
2、用npm安装webpack
npm install webpack -g
此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。
# 查看 webpack 版本信息
$ npm info webpack
# 安装指定版本的 webpack
$ npm install webpack@1.12.x -g
3、安装webpack-dev-server
npm install webpack-dev-server -g
二、使用
1、进入项目目录，运行npm init生成package.json文件
2、通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。运行完后会生成node_modules文件夹
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
3、如果不使用配置文件webpack.config.js则执行第4步，否则执行第5步
4、运行下面的命令将a.js文件打包生成b.js文件
webpack a.js b.js
在a.js文件中如果需要引入某个模块文件中的内容，则使用require引入
// a.js document.write(require('./module.js'));
Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。
5、在package.json中加入我们需要的依赖项，然后运行
npm intall // 安装package.json中所需要的依赖
新建配置文件webpack.config.js，
var webpack = require('webpack') module.exports = { entry: './entry.js', // 指定入口文件 output: { path: __dirname, // 两个下划线 filename: 'bundle.js' // 指定打包后输出文件 }, module: { loaders: [ {test: /\.css$/, loader: 'style!css'} ] } }
最后运行webpack命令，就可以编译。
如果需要添加插件，插件可以完成更多 loader 不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。
修改 webpack.config.js，添加 plugins：
var webpack = require('webpack') module.exports = { entry: './entry.js', output: { path: __dirname, filename: 'bundle.js' }, module: { loaders: [ {test: /\.css$/, loader: 'style!css'} ] }, plugins: [ new webpack.BannerPlugin('This file is created by zhaoda') ] }
然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息：
6、进入项目目录，启动服务器
webpack-dev-server
在浏览器中打开localhost:8080
三、webpack其他指令
当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。
webpack --progress --colors
如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
webpack --progress --colors --watch
当然，使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
webpack-dev-server --progress --colors
Webpack 的配置比较复杂，很容易出现错误，下面是一些通常的故障处理手段。
一般情况下，webpack 如果出问题，会打印一些简单的错误信息，比如模块没有找到。我们还可以通过参数--display-error-details 来打印错误详情。
webpack --display-error-details
Webpack 的配置提供了 resolve 和 resolveLoader 参数来设置模块解析的处理细节，resolve 用来配置应用层的模块（要被打包的模块）解析，resolveLoader 用来配置 loader 模块的解析。
当引入通过 npm 安装的 node.js 模块时，可能出现找不到依赖的错误。Node.js 模块的依赖解析算法很简单，是通过查看模块的每一层父目录中的 node_modules 文件夹来查询依赖的。当出现 Node.js 模块依赖查找失败的时候，可以尝试设置 resolve.fallback 和 resolveLoader.fallback 来解决问题。
module.exports = { resolve: { fallback: path.join(__dirname, "node_modules") }, resolveLoader: { fallback: path.join(__dirname, "node_modules") } };
Webpack 中涉及路径配置最好使用绝对路径，建议通过 path.resolve(__dirname, "app/folder") 或path.join(__dirname, "app", "folder") 的方式来配置，以兼容 Windows 环境。
四、参考链接
教程：
webpack中文指南：http://webpackdoc.com/
实例：
