webpack 入门

最近收听了vuejs作者的一期播客，貌似作者是华人（尤雨溪）在Google工作过，顿时感觉好亲切，虽然vuejs不像angularjs 和reactjs那样的大腿，但能和这两大框架并驾齐驱也挺不容易，以后一定要好好学下vuejs，作者在最后强烈推荐了webpack 这个工具，所以就小试验了下以下也是参考园友的入门教程。

首先是安装webpack 先确定系统中安装了node 在node下 npm install -g webpack

安装完成后需要新建webpack.config.js 这个类似grunt下的Gruntfile.js 是配置文件

module.exports={
	entry:'./enter.js',
	output:{
		path:'./dist',
		filename:'bundle.js'
	},
	module:{
		loaders:[  { test: /.css$/, loader: "style!css" }]
	}
}

其中entry 是项目的人口文件， output是项目的输出目录，module是require css文件需要用到的模块

enter.js

require("!style!css!./style.css");
document.write(require("./content.js"));

enter.js请求了content.js 其中样式文件也可以通过require加载进来

content.js

module.exports = "it works from contentjs";

而index.html可以直接引入生成的bundle.js 省去了ruquirejs的 data-main <script data-main="main" src="require.js"></script>这种形式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>webpack</title>
</head>
<body>
	<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>

最后输出 it works from contentjs

以上是一个helloword 下篇会应用 webpack+reactjs 的简单入门

而reactjs 虽然现在项目用不上但感觉学一下开阔下视野也是蛮不错的。

reactjs是 fackbook的开源项目，未完待续。。。

----------------------------------------------------------------