您的位置：首页 > Web前端 > Webpack

webpack 试用

2016-01-05 11:13 549 查看

最近收听了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的开源项目，未完待续。。。

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航