简洁的Webpack技术栈脚手架- Lite

背景：大家或许都有过这种经历，学习一些新知识，做一些测试，都需要开启一个demo工程，但是如果管理不够好，量大的话，几个月过后，平常的代码文件夹也凌乱不堪了。本项目便提供了一个开发环境，你可以将你的demo写到每个独立的js文件夹，然后便可以通过访问url来访问每个独立的项目了。

本项目提供了一份基础但是实用的webpack脚手架，基于webpack2.x，你可以基于此方便地开始你的新项目。

功能

• webpack支持打包ES6,Less,Sass，开发服务器默认监听在3005端口
• 集合mock服务，默认监听在8005端口
• 支持多入口文件
• 支持将项目全部构建为静态资源，方便地放到服务器上。

开始使用

一、克隆仓库

git clone https://github.com/luckyjing/lite.git <your_project_name>
cd <your_project_name>

二、安装依赖

npm install # 当然，用cnpm更好

三、启动

npm run dev

默认启动在3005端口，与此同时，还在8005端口上启动了mock服务，方便大家进行开发，有关mock的内容，可以查看此文章端口可以在package.json里面进行配置。

现在，你可以访问http://localhost:3005了

四、 项目静态化

执行构建命令，build文件夹会按照项目名独立存放构建好的html,css和js文件，你可以将其放到任何一个静态资源服务器上，比如anywhere

npm run build

# build
.
├── demo
│   ├── index.css
│   ├── index.html
│   └── index.js
├── index
│   ├── index.css
│   ├── index.html
│   └── index.js
├── index.html
└── vendor.js

恭喜你，你现在可以愉快的开发了~ 🤔

五、添加一个新项目

在scr/scripts下新建一个javascript文件

touch src/scripts/demo.js

创建其相关的html文件，css文件，这里并不限定其所在目录

touch src/css/demo.scss
touch src/html/demo.html

在demo.js文件里引入资源

import html from '../html/demo.html';
import '../css/demo.scss';
$('#root').append(html);

重新执行npm run dev，访问http://localhost:3005/demo

你也可以使用目录下的create.sh和del.sh

chmod +x create.sh del.sh
./create.sh <projectName>
./del.sh <projectName>