webpack-server-start

0.0.3 • Public • Published

Webpack Server Start

npm

🐦 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 使用文档

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.3
    1
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.0.3
    1
  • 0.0.2
    1
  • 0.0.1
    1
  • 0.0.0
    1

Package Sidebar

Install

npm i webpack-server-start

Weekly Downloads

0

Version

0.0.3

License

ISC

Unpacked Size

1.55 MB

Total Files

42

Last publish

Collaborators

  • angusyang9