本项目想实现一个小网站，
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
html
head
meta(charset="UTF-8")
meta(http-equiv="X-UA-Compatible",content="IE=Edge")
title=title
meta(name='keywords',content='')
meta(name='description',content='')
//- link(rel='stylesheet', href='/common.css')
link(rel='stylesheet', href='/#{staticTag}.css')
body
#little-project
.little-project-wrap
include header
block content
include footer
//- script(src='/common.js')
script(src='/#{staticTag}.js')
通过include footer, header 部分实现模板公用。
首页模板可以继承layout.jade:
index.jade:
extends ../share/layout
block content
h1= title
p 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也可以在此发光发热了。
