写在前面

http://jafeney.com/2016/02/02/2016-02-02-webpack/模块化构建会让项目的拓展性、代码复用性和可维护性大大提高，初期可能会增加一些管理的工作量。但是对长远来说绝对是值得的，一个良好的模块化方案会让维护工作变得轻松，这个好处项目越进展到后来越明显。而且模块化构建的框架和工具很多，RequireJS、SeaJS、Grunt、Gulp等，这些虽然成熟稳定但并不是我们今天的主题，既然是采用React开发webApp，那么模块化当然是选webpack。

webpack的优势

1、支持CommonJs和AMD模块，意思也就是我们基本可以无痛迁移旧项目 2、支持模块加载器和插件机制，可对模块灵活定制。babel-loader更是有效支持ES6。 3、可以通过配置，打包成多个文件。有效利用浏览器的缓存功能提升性能。 4、将样式文件和图片等静态资源也可视为模块进行打包。配合loader加载器，可以支持sass，less等CSS预处理器。 5、内置有source map，即使打包在一起依旧方便调试。

webpack入门

首先介绍webpack的配置文件webpack.config.js

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 var webpack=require('webpack'); module.exports={ entry:[ 'webpack/hot/onlu-dev-server', './js/app.js' ], output:{ path:'./build', filename:'bundle.js' }, module:{ leaders:[ {test:/\.js?$/,leaders:['react-hot','babel'],exclude:/node_modules/},</div><div class="line" style="color:rgb(255,255,255); min-height:19px"> {test:/\.js$/,exclude:/node_modules/,loader:/'babel-loader'},</div><div class="line" style="color:rgb(255,255,255); min-height:19px"> {test:/\.css$/,loader:'style!css'}, {test:/\.less/,loader:'style-loader!css-loader!less-loader'} ], }, resolve:{ extensions:['','.js','.json'] }, plugins:[ new webpack.NoErrorsPlugin() ] }

webpack.config.js 文件通常放在项目的根目录里，它本身也是一个标准的Common.js规范的模块。在导出的配置对象中有几个关键的参数：

entry

entry可以说个字符串或数组或者是对象。当entry是个字符串的时候用来定义入口文件。

1 entry:'./js/main.js'

当entry是个数组的时候，里面同样包含入口文件，另外一个参数可以用来配置webpack提供的一个静态资源服务器如webpack-dev-server，它会监控项目中每一个文件的变化，实时进行构建，并且自动刷新页面，

1 2 3 4 entry:[ 'webpack/hot/only-dev-server', './js/app.js' ]

当entry是一个对象的时候，我们可以将不同的文件构建成不同的文件，按需使用，比如：

1 2 3 4 entry:{ hello:'./js/hello.js', form:'./js/form.js' }

output

output是个对象，用户定义构建后的文件的输出。其中包含path和filename:

1 2 3 4 output:{ path:'./build', filename:'bundle.js' }

当我们在entry中定义构建多个文件时，filename可以对应地更改为[name].bundle.js。

module

关于模块的加载相关，我们就定义在module.loaders中，这里通过正则表达式去匹配不同后缀的文件名。然后它们定义不同的加载器，比如说给less文件定义三个串联的加载器（用!连接）

1 2 3 4 5 6 7 8 moudle:{ loaders:[ {test:/\.js?$/,loaders:['react-hot','babel'],exclude:/node_modules/},</div><div class="line" style="color:rgb(255,255,255); min-height:19px"> {test:/\.js$/,exclude:/node_modules/,loader:'babel-loader'},</div><div class="line" style="color:rgb(255,255,255); min-height:19px"> {test:/\.css$/,loader:'style!css'},</div><div class="line" style="color:rgb(255,255,255); min-height:19px"> {test:/\.less$/,loader:'style-loader!css-loader!less-loader'} ] }

除此之外，我们还可以用来定义 png、jpg这样的图片资源在小于10k时自动处理为base64图片的加载器。

1 {test:/\.(png|jpg)$/,loader:'url-loader?limit=10000'}

给css和less还有图片添加了loader之后，我们不仅可以像在node中那样require进来了。就像这样：

1 2 3 4 require('./bootstrap.css'); require('./myapp.less'); var img=document.createElement('img'); img.src=require('./glyph.png');

注意： 这样require进来的文件会内联到 [name].bundle.js中。如果我们需要把保留 require写法又想把css文件单独拿出来，可以使用extract-text-webpack-plugin插件。

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

1 2 3 4 5 6 var ExtractTextPlugin =require('extract-text-webpack-plugin'); module.exports={ plugins:[ new ExtractTextPlugin("[name].css"); ] }

在上面的示例代码中配置的第一个loader是react-hot的加载器，它可以实现react组件的热替换，我们已经在entry参数中配置了webpack/hot/only-dev-server,所以我们只要启动 webpack时开启-hot参数既可以使用react-hot-loader了，在package.json中这样定义：

1 2 3 4 "script":{ "start":"webpack-dev-server --hot --progress --colors", "build":"webpack --progress --colors" }

resolve

webpack在构建包的时候会按目录的文件进行查找，resolve属性中的extensions数组中用于配置程序可有自动替换哪些文件的后缀,比如：

1 2 3 resolve:{ extensions:['','.js','.json'] }

然后我们想要加载一个js文件时，只要require('common')就可以加载common.js文件了。

plugin

webpack提供了丰富的组件来满足不同的需求，当然如果你足够牛也可以自己编写插件。这里介绍比较常用的NoErrorsPlugin，它能跳过编译时出错的代码并记录，是编译后运行的包不会发生错误。

1 2 3 plugins:[ new webpack.NoErrorsPlugin() ]

externals

当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码构建到运行时的文件中，就可以通过配置externals参数来解决这个问题，比如jQuery类库

1 2 3 externals:{ "jquery":'jQuery' }

这样我们就可以放心在项目中使用这些API了

1 var jQuery=require('jquery');

context

当我们在require一个模块的时候，如果require中包含变量，想这样：

1 require("./mods/"+name+".js");

那么在编译的时候是不能知道具体的模块的。但这个时候webpack也会帮我们分析：

分析目录：'./mods';提取正则表达式：/^.*\.js$/; 于是这个时候为了更好地配合webpack进行编译，我们可以给它指明路径，像在cake-webpack-config中所做的那样： 1 2 var currentBase=progress.cwd(); var context=abcOptions.options.context?abcOptions.options.context:path.isAbsolute(entryDir)?enentryDir:path.join(currentBase,entryDir);

让webpack和gulp强强联手

webpack与gulp并不矛盾，甚至一起使用会得到最大化的效益。大致的思路是这样： 使用webpack进行assets编译，使用gulp的流快速对其他资源进行打包。

关于工具的定位

webpack的定位是module bundler，作为模块化工具，它的竞争对手其实是browserify，而不是gulp。

功能和使用方式上的不同

webpack 提供了一些非常使用的功能，像我们之前用到的那些，如图片的处理、resolve的处理、分开构建等,配置相当简单。gulp想要使用这些功能的时候我们可以在webpack里先配置好，做到强强联手！

---

@参考 推酷 webpack前端模块加载工具 @参考 博客园 前端模块化工具-webpack @我的技术博客 Jafeney.com