webPack

介绍

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。
你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期 Github 上各大主流的（React相关）项目来说，它们仓库上所展示的示例已经是基于 webpack 来开发的，比如 React-Boostrap 和 Redux。
webpack的官网是 http://webpack.github.io/ ，文档地址是 http://webpack.github.io/docs/ ，想对其进行更详细了解的可以点进去瞧一瞧。

安装

全局安装

npm install webpack -g

局部安装依赖

npm init

npm install webpack –save-dev

配置

每个项目下必须配置有一个 webpack.config.js,它的作用如同gulpfile.js/Gruntfile.js,就是一个配置项，告诉webpack它需要做什么。

局部安装模块
cnpm install sass-loader -D
cnpm install css-loader -D
cnpm install style-loader -D
cnpm install url-loader -D
…
例子:
var webpack = require(‘webpack’); //请求加载webpack模块
module.exports = {
//页面入口位置
entry : {
index : ‘./xxx’ // ./当前目录下的xxx文件
//支持数组形式，将加载数组中的所有模块，但以最后一个模块进行输出
//index[‘./xxx1’,’./xxx2’]
},
//入口文件输出配置
output : {
path : ‘./xxx’, //设置输出文件路径
filename : ‘boundle.js’ //设置输出的文件名称(css、scss、所有压缩打包输出的文件)
},
module : {
//加载器配置
loaders : [
//.scss 文件使用 style-loader 和 css-loader 和 sass-loader 来编译处理
{ test : /.scss$/, loader: ‘style-loader!css-loader!sass-loader’}, //其中-loader可以省略
//.js 文件使用 jsx-loader 来编译处理
{ test : /.js$/, loader: ‘jsx-loader’},
//.css 文件使用 style-loader 和 css-loader 来编译处理
{ test : /.css$/, loader: ‘style-loader!css-loader’},
//图片文件使用 url-loader 来编译处理,小于8kb的直接转为base64
{ test : /.(png|jpg)$/, loader : ‘url-loader’}
]
}
}

引用

最后直接引用输出的文件 ./xxx/boundle.js即可