本项目想实现一个小网站，
css方面：带reset.css，能使用sass语法；
js方面：能使用es6语法；
模板方面：有可继承的模板，公用部分可提取公用的模板；
项目实现热启动：

实现思路：

• 使用express搭建项目；

• 模板使用jade模板，模板可继承，并能引入公用的header,footer部分；

• 引入webpack

• 搭建es6环境

• 引入nodemon 实现热启动

正文从这里开始~

express搭建项目

使用express-generator可以快速创建express项目
首先，安装express-generator:

npm install express-generator -g 

使用express创建项目：

express little-project

生成的项目模板引擎默认使用jade模板。

如果想使用ejs模板，可以加上参数-e:

express -e little-project

可以看到生成如下的目录结构：

启动命令：node ./bin/www
即可看到 welcome to express 的页面了。

模板继承

页面如果想使用公用的头部和尾部，可以在jade这里做些设计：
我们在views下建立share文件夹，用于存放公用的jade模板。index文件夹存放首页用到的jade模板。

layout.jade

doctype html
htmlheadmeta(charset="UTF-8")meta(http-equiv="X-UA-Compatible",content="IE=Edge")title=titlemeta(name='keywords',content='')meta(name='description',content='')//- link(rel='stylesheet', href='/common.css')link(rel='stylesheet', href='/#{staticTag}.css')body#little-project.little-project-wrapinclude headerblock contentinclude footer//- script(src='/common.js')script(src='/#{staticTag}.js')

通过include footer, header 部分实现模板公用。

首页模板可以继承layout.jade:
index.jade:

extends ../share/layoutblock contenth1= titlep Welcome to #{title}

路由部分去指定staticTag的值：

router.get('/', function(req, res, next) {res.render('index/index', { title: 'E', staticTag: 'index'});
});

这样，就可以实现每个页面自动使用staticTag变量的js

webpack

建立webpack.config.js：
touch webpack.config.js:

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
//路径是相对于package.json所在路径
var entry_map = {'index': './public/index/index.js',
}
module.exports = {entry: entry_map,devtool: 'source-map',output: {path: path.resolve(process.cwd(),'dist/'),//[name]-[hash].js可以指定hash值。filename: '[name].js',},plugins: [new ExtractTextPlugin("[name].css")],module: {loaders: [{test: /\.js[x]?$/,exclude: /(node_modules)|(global\/lib\/)/,loader: 'babel-loader'},{test: /\.css$/,loader: ExtractTextPlugin.extract('style-loader','css-loader')},{test: /\.scss$/,//!代表先执行 ？是传递给loader的参数，?sourceMap表示使用sourceMap， js使用sourcemap通过devtool: sourcemap来指定。loader: ExtractTextPlugin.extract('style-loader','css-loader?sourceMap&-convertValues!sass-loader?sourceMap')}]}
}

首先，想单独为页面引入css, 需要引入extract-text-webpack-plugin插件。

loaders中使用extract-text-webpack-plugin这个插件, !是先执行的意思，有点像反过来的管道。
css-loaders 将@import url()翻译为require
style-loaders注入style标签

npm install extract-text-webpack-plugin --save-dev
npm install css-loader --save-dev
npm install style-loader --save-dev
npm install sass-loader --save-dev
//安装sass-loader先安装node-sass
npm install node-sass --save-dev
npm install babel-loader --save-dev

配置ES6环境

touch .babelrc

   presets:['es2015','react','stage-0','stage-3'],plugins:[]
}

npm install babel-cli --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install babel-preset-stage-0 --save-dev

在app.js中指定静态文件目录：

app.use(express.static(path.join(__dirname, 'dist')));

这样当页面请求index.js时，会去dist目录寻找index.js

热启动

npm install nodemon -g

nodemon ./bin/www即可实现热启动

OK了，后续就可以在这个站的基础上做页面了。webpack也可以在此发光发热了。

Reference

http://webpackdoc.com/configu...