本文不是webpack入门文章，如果对webpack还不了解，请前往题叶的 Webpack入门 ，或者阮老师的 Webpack-Demos 。
第3点我想稍微论述一下，如果看过我之前写的 《如何写一个webpack插件（一）》 ，会发现，webpack会将文件内容存在compilation这个大的object里面，方便各种插件，loader间的调用。虽然gulp也用到了流(pipe)这样的内存处理方式，但感觉webpack更进一步。gulp是每一个任务(task)用一个流，而webpack是共享一个流。
Webpack的配置主要为了这几大项目：
了解了以上介绍的Loaders和Plugins之后，基本就可以搭建一整套基于Webpack的构建（不需要gulp与grunt，合图除外）。下面让我来介绍一下在使用过程中的一些优化点。
"scripts": { "publish-mac": "export NODE_ENV=prod&&webpack -p --progress --colors", "publish-win": "set NODE_ENV=prod&&webpack -p --progress --colors"}使用代码热替换在开发的时候无需刷新页面即可看到更新，而且，它将构建的内容放入内在中，能够获得更快的构建编译性能，因此是官方非常推荐的一种构建方式。
1.将代码内联到入口js文件里
2.启动代码热替换的plugins
直接实现一个server.js，启动服务器（需要启动热替换plugin)，下面是我在业务中用到的一个范例。具体的一些参数可以
var webpack = require('webpack');var webpackDevMiddleware = require("webpack-dev-middleware");var webpackDevServer = require('webpack-dev-server');var config = require("./webpack.config.js"); config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000"); // 将执替换js内联进去config.entry.index.unshift("webpack/hot/only-dev-server");var compiler = webpack(config);var server = new webpackDevServer(compiler, { hot: true, historyApiFallback: false, // noInfo: true, stats: { colors: true // 用颜色标识 }, proxy: { "*": "http://localhost:9000" // 用于转发api数据，但webpack自己提供的并不太好用 },});server.listen(9000);
直接在webpack.config.js上配置。这个办法最简单，当然灵活性没有自己实现一个服务器好。
如果你想将react分离，不打包到一起，可以使用externals。然后用
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
