搭一个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中文备注

#javascript
搭一个little-project脚手架（1）webpack+es6
https://guoningyan.com/2016/06/22/搭一个little-project脚手架（1）webpack+es6/
作者
Ningyan Guo
发布于
2016年6月22日
许可协议