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 ^5.x.x > webpack 5.x.x
- 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。
- offsetPort: {Boolean}, default false。when mutil webpack target web config, need set true。
- 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。
- 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') };
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.fileSystemto app, you can customize the webpack memory 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.
Please open an issue here.