Egg-webpack NPM

egg-webpack

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

support webpack native configuration by webpack.webpackConfigList
when no config webpack.webpackConfigList, egg-webpack will dynamic create webpack config by webpack.config.js(easywebpack), and start multiple process build.

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,  
  // proxy: true,
  // 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}, default true. webpack compiled in a separate service inside, you can use project domain and port access static resources。
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 =>{

})

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.