使用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...