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

但是需要知道的是，这样require来的文件会内联到 js bundle中。如果我们需要把保留require的写法又想把css文件单独拿出来，可以使用下面提到的[extract-text-webpack-plugin]插件。

在上面示例代码中配置的第一个loaders我们可以看到一个叫做react-hot的加载器。我的项目是用来学习react写相关代码的，所以配置了一个react-hot加载器，通过它，可以实现对react组件的热替换。我们已经在entry参数中配置了`webpack/hot/only-dev-server`,所以我们只要在启动webpack开发服务器时开启--hot参数，就可以使用react-hot-loader了。在package.json文件中这样定义：

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

4.resolve

webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀：

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

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

5.plugin

webpack提供了[丰富的组件]用来满足不同的需求，当然我们也可以自行实现一个组件来满足自己的需求。在我的项目里面没有特殊的需求，于是便只是配置了NoErrorsPlugin插件，用来跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误：

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

6.externals

当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题：

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

这样我们就可以放心的在项目中使用这些API了：var jQuery = require("jquery");

7.context

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

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

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

1.分析目录：'./mods'；
2.提取正则表达式：'/^.*\.js$/'；

于是这个时候为了更好地配合wenpack进行编译，我们可以给它指明路径，像在cake-webpack-config中所做的那样（我们在这里先忽略abcoption的作用）：

1 var currentBase = process.cwd(); 2 var context = abcOptions.options.context ? abcOptions.options.context : 3 path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

webpack与gulp并不矛盾，甚至一起使用会得到最大化的利益，webpack与gulp。使用webpack进行assets编译，使用gulp进行打包似乎就是为了让它们各司其职，用其所长。

关于工具的定位

webpack的定位是module bundler，作为模块化工具，它的竞争对手看起来更像是[browserify]，而不是[Gulp]，基于流的自动化构建工具。然而事实也是这样的。  

功能和使用方式上的不同

webpack提供了一些非常实用的功能，像在前面我们体会到的那些，比如说图片的处理，resolve的处理，分开构建[webpack-code-splitting]等等 。 许多其他工具需要插件的功能，webpack只要配置一下就可以了。

有时候一个东西到底怎样，自己折腾一遍或许体会就更加深刻了。

- [webpack]
- [cake-webpack-config]
- [webpack-howto]
- [webpack-compared]