webpack-serve

官方已经不维护了，还请继续食用webpack-dev-server

基本情况

仓库地址

配合webpack4食用最佳，在webpack3及以前的版本会有帮助信息提示

因为热加载使用的是WebSockets，所以在老版本的浏览器里用不了

和webpack-dev-server的差异

How is webpack-serve different from webpack-dev-server?

安装

$ npm install --save-dev webpack-serve 
或 
$ yarn add -D webpack-serve

使用

在客户端使用命令行模式：

$ webpack-serve
或
$ webpack-serve ./webpack.config.js
或
$ webpack-serve --config ./webpack.config.js

在node里使用API模式

const serve = require('webpack-serve');
serve([option]);

webpack-serve的配置

在项目的根目录/下：

1. package.json里添加serve属性
2. 创建.serverc或者.serverc.json文件，支持json或者yml的编写格式
3. 使用commonjs规范编写的serve.config.js文件

更常用的方式是在webpack的config里添加serve属性

关于webpack-serve API 模式 的 option 属性

介绍几个我觉得常用的，其余的可以在官方文档里查看

config

Type: Object

Default: {}

用于设置webpack的配置信息

const serve = require('webpack-serve');
const config = require('./webpack.config.js');
serve({config});

content

Type: String|[String]

Default: process.cwd()

用于设置静态资源的读取路径

Note: 默认情况下，该配置下的路径读取优先级高于webpack的配置路径

const serve = require('webpack-serve');
const config = require('./webpack.config.js');
serve({
    content: [__dirname],
    config
});

如果想要使用webpack的配置路径，需要使用到add附加属性的配置，在content之前调用webpack

serve({
    content: [__dirname],
    config
    add: (app, middleware, options) => {
        middleware.webpack();
        middleware.content();
    }
});

add

附加功能配置

上面的content里有简单的使用介绍

回调参数：

• app 底层的koa应用实例
• middleware 通过Accessor functions(访问函数)调用webpack-dev-middleware和koa-static middleware的对象。
• options webpack的配置

还有很多功能可以添加进去

• bonjour //局域网DNS多播
• compress
• historyApiFallback
• proxy + history fallback
• proxy + router
• reuse Chrome tab
• staticOptions
• useLocalIp
• watch content

具体可以看文档和代码示例

对于单页应用来说，historyApiFallback 是很有必要的一个功能，主要是用于刷新页面后路由重定向，
对于需要做中间层api转发的还有端口和路由转发的proxy模块也是有用到的

// 因为基于koa2, 所以要把中间件用koa-connect包一层
const convert = require("koa-connect");
const history = require("connect-history-api-fallback"); // h5路由适配
serve: {
    add: (app, middleware, options) => {            
        app.use(convert(proxy('/api', { target: 'http://localhost:8000' })));
        app.use(convert(history({
            disableDotRule: true,
            verbose: true,
            htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
            // ... see: https://github.com/bripkens/connect-history-api-fallback#options
        })));
    },
    port: '3000'
}