题记： 一个人的项目，还有工程化的问题嘛？
我们在推进模块化和组件化的过程中，肯定会不断的沉淀出我们项目的模块和组件。对于这些沉淀出的模块和组件怎么管理？另外怎么依赖也是个问题？
你真的想这样嘛？
var BreadCrumb = require(‘../../../../uikit/breadcrumb’); //真心ugly。
之前也尝试了很多的不同的解决方案，最终发现npm2.0的local module是最简单的，而且最符合模块化思维，我们可以把我们的模块按照功能进行划分。
比如：
uikit
— breadcrumb.js
— data-table.js
— search-form.js
...
util
—ajax.js
—pagenation.js
dialog.js
...
这样我们建立自己的模块，然后可以单独的维护，单独提交到git，然后通过npm install来进行本地安装。而且解决了依赖的问题。
对于上面的问题，我们可以简单这样玩：
var BreadCrumb = require(‘uikit/breadcrumb’); //cool.正如我们期待的一般
但是通过我们项目多人协调的过程中，不爽的地方暴露出来，因为我们的公共模块很少，我们也在不断努力的在抽取，这样会导致我们公共的模块变化比较大，每次变动的时候都需要删除node_modules下面本地安装的uikit，然后再次npm install ….一次我忍了，二次一声叹息， 三次四次，你妹。。。是的，我懂的，我们都么有那么好的耐心。
那怎么办呢？？
我们又想按照标准模块的做法，又想酷爽的解决标准模块的依赖问题。不得再次祭出webpack。真的懂我们开发者的心啊，么么哒！
由于node的横空出世，彻底解放了前端的生产力。大神们纷纷开始造了一个个轮子。比如想在前端建立前端的仓库，类似maven的仓库，比较有名的是bower（twitter出品），components（tj大神）。所以为了兼容这些轮子，webpack也做了相应的适配。正好这个适配也可以很好的解决上面我提到的我们想要解决的问题。
剩下的事情就变得异常的简单了， 一个配置项搞定。
在webpack中的配置文件中
module.exports = {
entry: ‘./index.js‘,
output: {
path: ‘./build‘,
filename: ‘bundle.js‘
},
resolve: {
modulesDirectories: [‘‘, ‘uikit‘, ‘node_modules’] //是的，webpack提供了多个模块目录的解析，通过这个解决本地模块的问题。
}
};
for example：
? web-module tree -L 2
.
├── build
│ └── bundle.js
├── index.js
├── package.json
├── uikit
│ ├── index.js
│ ├── package.json
│ └── utils.js
├── webpack.config.js
└── webpack.config.js~
2 directories, 8 files
? web-module more uikit/utils.js
var _ = module.exports = {};
_.sayHello = function() {
console.log(‘111say hello world...‘);
};
? web-module more index.js
require(‘uikit/utils‘).sayHello();
打包，
webpack
运行
? web-module node build/bundle.js
111say hello world...
这是你修改utils的方法，就不需要什么本地安装了。
在我们顺利的解决了模块化依赖的问题后，再来看看工作流的问题。
当我们在开发环境中，我们需要不停的自动的监控打包，然后在上线之前还要做做写优化比如压缩等。于是就需要不停的敲命令了。
开发环境，
webpack
webpack -d —-config webpack.config.js
webpack —watch
webpack -d —config webpack.config.js —watch
上线：
webpack -p —config webpack.production.js
敲出上述的命令也真是一件体力活。还好npm的run可以为我们定制一些的工作流。在package.json中配置，相应的参数即可。
{
"name": "web-module",
"version": "1.0.0",
"description": "web module",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js -w",
"release": "webpack --config webpack.production.js",
"start": "webpack-dev-server --port 3000 --watch --process --color"
},
"keywords": [
"web",
"module"
],
"author": "hufeng",
"license": "ISC"
}
爽直的时刻：
npm run build #开发
npm run dist #正式环境打包
? web-module npm run build
> [email protected] build /Users/bee1314/Code/eggs/web-module
> webpack --config webpack.config.js -w
Hash: a2f467270792fdfe044c
Version: webpack 1.4.15
Time: 77ms
Asset Size Chunks Chunk Names
bundle.js 1709 0 [emitted] main
[0] ./index.js 35 {0} [built]
[1] ./uikit/utils.js 99 {0} [built]
? web-module npm start
> [email protected] start /Users/bee1314/Code/eggs/web-module
> webpack-dev-server --port 3000 --watch --process --color
http://localhost:3000/webpack-dev-server/
webpack result is served from /
content is served from /Users/bee1314/Code/eggs/web-module
Hash: a2f467270792fdfe044c
Version: webpack 1.4.15
Time: 90ms
Asset Size Chunks Chunk Names
bundle.js 1709 0 [emitted] main
chunk {0} bundle.js (main) 134 [rendered]
[0] ./index.js 35 {0} [built]
[1] ./uikit/utils.js 99 {0} [built]
webpack: bundle is now VALID.