Skip to content
development server plugin for egg + webpack, support memory file and hot update
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
app/extend refactor:seperate easywebpack Jun 16, 2017
config fix: worker reload get new port will lead static file error Oct 11, 2018
lib fix: child process not exit Nov 1, 2018
.autod.conf.js feat:init Apr 25, 2017
.eslintignore feat:init Apr 25, 2017
.eslintrc feat:http static resource mapping relative path Jul 14, 2017
.gitattributes style:update github language show May 9, 2017
.gitignore fix: webpack config error Oct 15, 2018
.travis.yml fix: webpack config error Oct 15, 2018 Release 4.4.9 Nov 1, 2018
LICENSE feat:init Apr 25, 2017 doc: add app.webpack.fileSystem.readWebpackMemoryFile how to use doc Feb 12, 2019
app.js fix: browser config is invalid Oct 22, 2018
index.js feat:init Apr 28, 2017
package.json fix: child process not exit Nov 1, 2018


NPM version build status Test coverage David deps Known Vulnerabilities npm download

Webpack dev server plugin for egg, support read file in memory and hot reload. More Detail


  • egg-webpack ^4.x.x > webpack 4.x.x
  • egg-webpack ^3.x.x > webpack 3.x.x


$ npm i egg-webpack --save


// {app_root}/config/plugin.js
exports.webpack = {
  enable: true,
  package: 'egg-webpack',


support native webpack config and easywebpack webpack config

// {app_root}/config/config.default.js
exports.webpack = {
  // port: 9000,  

  // webpackConfigList: [],
  • port: {Number}, default 9000. webpack dev server port, default 9000, when hava multile webpack config, the port incremented。
  • browser: {Boolean | String} if it is boolean type, whether to open the browser automatically, defualt true; if it is string, That is url address, will automatically open the browser's url address。
  • proxy: {Boolean | Object}. webpack compiled in a separate service inside, default webpack service is, you can set koa-proxy options access static resources by koa-proxy。the default options:
config.webpack = {
  proxy: {
    host: '', // target host that matched path will be proxy to
    match: /^\/public\//, // proxy url path pattern.
  • webpackConfigList: {Array}, optional, default []. native webpack config.
  • webpackConfigFile: {String}, optional, you must set when you easywebpack config file is not in the project root directory。

webpack native configuration

  • if you write one native webpack config ${app_root}/build/webpack.config.js, you can use like this:
// {app_root}/config/config.default.js
exports.webpack = {
  webpackConfigList: [require('../build/webpack.config.js')]
  • if you use easywebpack solution, you can use like this:

default read webpack.config.js file under the project root directory.

const EasyWebpack = require('easywebpack-vue');
// {app_root}/config/config.default.js
exports.webpack = {
  webpackConfigList: EasyWebpack.getWebpackConfig()
  • if you use easywebpack solution, the easywebpack config file in ${app_root}/build/webpack.config.js, you can use like this:
const EasyWebpack = require('easywebpack-vue');
// {app_root}/config/config.default.js
exports.webpack = {
  webpackConfigList: EasyWebpack.getWebpackConfig('build/webpack.config.js')

easywebpack configuration

The default read webpack.config.js file under the project root directory.

// {app_root}/config/config.default.js
exports.webpack = {
  webpackConfigFile: 'build/webpack.config.js', // easywebpack config file path

see config/config.default.js for more detail.


  • mount app.webpack.fileSystem to app, you can customize the file read logic
// read webpack browser build mode memory file content
app.webpack.fileSystem.readWebpackMemoryFile(filePath).then(fileContent =>{

  • render vue from webpack memory
const path = require('path');
const egg = require('egg');
const vueServerRenderer = require('vue-server-renderer');
module.exports = class IndexController extends egg.Controller {
  async index(ctx) {
    const { app } = ctx;
    const filepath = path.join(app.config.view.root[0], 'app.js');
    // server render mode, the webpack config target:node
    const strJSBundle = await app.webpack.fileSystem.readWebpackMemoryFile(filepath);
    ctx.body = await vueServerRenderer.createBundleRenderer(strJSBundle).renderToString({});

see lib/server.js for more detail.

  • monitor webpack build state
app.messenger.on(app.webpack.Constant.EVENT_WEBPACK_BUILD_STATE, data => {
  if (data.state) {
    const filepath = path.join(app.baseDir, 'config/manifest.json');
    const promise = app.webpack.fileSystem.readWebpackMemoryFile(filepath);
    promise.then(content => {
      fs.writeFileSync(filepath, content, 'utf8');

see lib/constant.js for more detail.

Questions & Suggestions

Please open an issue here.



You can’t perform that action at this time.