Skip to content
development server plugin for egg + webpack, support memory file and hot update
Branch: master
Clone or download
Permalink
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
test
.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: config.target:web webpack config error Oct 15, 2018
.travis.yml fix: config.target:web webpack config error Oct 15, 2018
CHANGELOG.md Release 4.4.9 Nov 1, 2018
LICENSE feat:init Apr 25, 2017
README.md doc: add app.webpack.fileSystem.readWebpackMemoryFile how to use doc Feb 12, 2019
agent.js
app.js fix: browser config is invalid Oct 22, 2018
appveyor.yml
index.js feat:init Apr 28, 2017
package.json fix: child process not exit Nov 1, 2018

README.md

egg-webpack

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

Version

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

Install

$ npm i egg-webpack --save

Usage

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

Configuration

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 http://127.0.0.1:9000, you can set koa-proxy options access static resources by koa-proxy。the default options:
config.webpack = {
  proxy: {
    host: 'http://127.0.0.1:9000', // 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.

Customise

  • 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
'usestrict';
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.

License

MIT

You can’t perform that action at this time.