使用express+webpack搭建一个小项目

本项目想实现一个小网站，
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也可以在此发光发热了。

Reference

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