一、什么是webpack？
Webpack 是德国开发者 Tobias Koppers 开发的模块加载器Instagram 工程师认为这个方案很棒, 似乎还把作者招过去了在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等..因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。
Webpack 是一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能，并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。
webpack与browserify其实有许多相同的功能，但仍有很多自己的新特性：
1. 对 CommonJS 、 AMD 、ES6的语法做了兼容
2. 对js、css、图片等资源文件都支持打包
3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
4. 有独立的配置文件webpack.config.js
5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
6. 支持 SourceUrls 和 SourceMaps，易于调试
7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快
对应各种不同文件类型的资源, Webpack 有对应的模块 loader比如 CoffeeScript 用的是 coffee-loader, 其他还有很多:http://webpack.github.io/docs/list-of-loaders.html大致的写法也就这样子:
module.exports = {
……
module:{
loader:[
{ test: /.coffee$/, loader: 'coffee-loader' },
{ test: /.js$/, loader: 'jsx-loader?harmony' }
]
}
}
二、webpack对CommonJS 与 AMD 支持
Webpack 对 CommonJS 的 AMD 的语法做了兼容, 方便迁移代码，不过实际上, 引用模块的规则是依据 CommonJS 来的
require('lodash') // 从模块目录查找 require('./file') // 按相对路径查找
AMD 语法中, 也要注意, 是按 CommonJS 的方案查找的
define (require, exports. module) ->
require('lodash') # commonjs 当中这样是查找模块的
require('./file')
三、webpack安装与配置
1.安装webpack工具
npm install -g webpack
2.初始化package.json，局部安装webpack包
npm init并按照需要填写内容
npm install --save-dev webpack
Webpack 使用一个名为 webpack.config.js 的配置文件，例如要编译 JSX，先安装对应的 loader: npm install babel-loader --save-dev。
3.webpack配置示例demo：
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//插件项
plugins: [commonsPlugin],
//页面入口文件配置
entry: {
index : './src/js/page/index.js',
//支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
main:['index.js','main.js']
},
//入口文件输出配置
output: {
path: 'dist/js/page',
publicPath:'https://jd.com/'
filename: '[name].js'
},
module: {
//加载器配置
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /.css$/, loader: 'style-loader!css-loader' },
//.js 文件使用 jsx-loader 来编译处理
{ test: /.js$/, loader: 'jsx-loader?harmony' },
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
{ test: /.scss$/, loader: 'style!css!sass?sourceMap'},
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
//缩写url-loader 缩写 url
{ test: /.(png|jpg)$/, loader: 'url?limit=8192'
]
},
//其它解决方案配置
resolve: {
//查找module的话从这里开始查找
root: 'E:/github/flux-example/src', //绝对路径
//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
extensions: ['', '.js', '.json', '.scss'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};
4.webpack常用的命令
$ webpack --display-error-details
即可，后面的参数“–display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。
常用命令
webpack 最基本的启动webpack命令 webpack -w 提供watch方法，实时进行打包更新 webpack -p 对打包后的文件进行压缩 webpack -d 提供SourceMaps，方便调试 webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤 webpack --profile 输出性能数据，可以看到每一步的耗时 webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
参考资料：