搭一个little-project脚手架(1)webpack+es6

这篇文章用于叙述这个项目的搭建过程和理由,用法比较简单,用es6进行代码书写(eslint代码检查),用babel编译,webpack打包,加入常用css库文件(eg:normalize.css)、js库文件(eg:fetch.js),可选择BDD。若比较成功,后期将做成npm包使用。

目录结构设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- node_modules
- client - asserts(just for images or other resource like sounds or movs)
- components
- page1.js(small pros are just divided into pages,or exact divided into slider,title)
- page1.scss
- public
- scss
- css
- normalize.css
- js
- fetch.js
- dist(release dictionary)
- index.html
- package.json
- webpack.config.js
- .gitignore
- .eslintrc

webpack
具体优势可以参考:webpack优势,在本项目中主要是作为模块打包工具使用,通过自定义的方式将依赖树拆分成按需加载的块。
在项目根目录中使用webpack.config.js设置打包的文件目录,dist是最后需要提交的文件夹,所以将打包好的js文件命名为bundle.js保存到dist目录下,在index.html中引入。
index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
1
2
webpack -w //启用监听模式,没有变化的模块编译后返回到内存中
webpack-dev-server //默认启动在localhost:8080的服务

fetch.js
目前引用了fetch.js来实现ajax请求,FetchAPI也可以使用,以后确定浏览器支持性可以完全替换。

附录
本项目git地址
配置eslint中文备注