webpack-server-start v0.0.3

🐦 webpack-based 【development server】 && 【build】 && 【prodcution server】

安装

npm install webpack-server-start --save--dev

development server

1. 业务入口配置

entries.demo.js

// 可配置多个入口
var entries = {
  'index': {
     entry: './src/app.js',
     template: {
       dev: './dev.html',
       prod: './prod.html'
     }
  },
  'index2': {
     entry: './src/app2.js',
     template: {
       dev: './dev.html',
       prod: './prod.html'
     }
  },
}

2. webpack配置

webpack.config.dev.js

module.exports = {
  // entry: '', here is useless, entry will be replace by 入口配置的entry
  output: {
    publicPathForDevServer: '/dev/', // /dev will be as the development root path

    extraPath: {
      'image': './image', // this can be use '../image/xxx.png'
    }   
    // ...
  },
  // other webpack common config...
}

3. 开发服务器启动

var webpackConfig = require('./webpack.config.dev.js');
var entries = require('./entries.demo.js');
var devServer = require('webpack-server-start').devServer;

/**
 * @param {Object} webpackConfig Webpack config.
 * @param {Object} entries 入口配置.
 * @param {Number} port 服务器监听的端口号, 默认5678.
 * @param {String} birdPath Bird代理中间件，文件路径.
 */
devServer(webpackConfig, entries);

build

1. 入口配置

与 dev server entires 相同规则

2. webpack配置

webpack.config.prod.js

var path = require('path');
module.exports = {
  // entry: '', here is useless, entry will be replace by 入口配置的entry
  output: {
    // for production
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',    

    extraPath: {
      'image': './image', // this can be use '../image/xxx.png'
    }   
    // ...
  },
  // other webpack common config...
}

3. build 开始

var webpackConfig = require('./webpack.config.prod.js');
var entries = require('./entries.demo.js');
var build = require('webpack-server-start').build;

/**
 * @param {Object} webpackConfig Webpack config.
 * @param {Object} entries 入口配置.
 */
build(webpackConfig, entries);

production server

启动构建后的项目

var prodServer = require('webpack-server-start').prodServer;

/**
 * @param {String} dirPath Can be either absolute or releative path.
 * @param {Number} port 服务器监听的端口号, 默认8110.
 * @param {String} birdPath Bird代理中间件，文件路径.
 */
prodServer('./dist');

补充说明

需 build 的 html 模版文件可以增加 buildTime 防止浏览器缓存。例如：

<script type="text/javascript" src="../app.bundle.js?v=@{buildTime}@"></script>

关于上文中提到的 bird 代理中间件, 可参考 bird 使用文档 。