koa-webpack

2018-12-08 admin

koa-webpack是什么

什么是koa-webpack,Development and Hot Reload Middleware for Koa2

koa-webpack使用教程帮助文档

<div align=“center”> </div>

npm node deps tests chat size

koa-webpack

Development and Hot Module Reload Middleware for Koa2, in a single middleware module.

This module wraps and composes webpack-dev-middleware and webpack-hot-client into a single middleware module, allowing for quick and concise implementation.

As an added bonus, it’ll also use the installed webpack module from your project, and the webpack.config.js file in the root of your project, automagically, should you choose to let it. This negates the need for all of the repetitive setup and config that you get with koa-webpack-middleware.

Requirements

This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

Getting Started

To begin, you’ll need to install koa-webpack:

$ npm install koa-webpack --save-dev

Next, setup the module in your code. (We’re assuming ES6 syntax here)

const Koa = require('koa');

const app = new Koa();

const koaWebpack = require('koa-webpack');

koaWebpack({ .. options .. })
 .then((middleware) => {
  app.use(middleware);
});

API

koaWebpack([options])

Returns a Promise which resolves the server middleware containing the following additional properties:

  • close(callback) (Function) - Closes both the instance of webpack-dev-middleware and webpack-hot-client. Accepts a single Function callback parameter that is executed when complete.
  • hotClient (Object) - An instance of webpack-hot-client.
  • devMiddleware (Object) - An instance of webpack-dev-middleware

Options

The middleware accepts an options Object, which can contain options for the webpack-dev-middleware and webpack-hot-client bundled with this module. The following is a property reference for the Object:

compiler

Type: Object optional

Should you rather that the middleware use an instance of webpack that you’ve already init’d [with webpack config], you can pass it to the middleware using this option.

Example:

const webpack = require('webpack');
const config = require('./webpack.config.js');
const compiler = Webpack(config);
const koaWebpack = require('koa-webpack');

koaWebpack({ compiler })
 .then((middleware) => {
  app.use(middleware);
});

config

Type: Object optional

Should you rather that the middleware use an instance of webpack configuration that you’ve already required/imported, you can pass it to the middleware using this option.

Example:

const config = require('./webpack.config.js');
const koaWebpack = require('koa-webpack');

koaWebpack({ config })
 .then((middleware) => {
  app.use(middleware);
});

devMiddleware

Type: Object optional

The devMiddleware property should contain options for webpack-dev-middleware, a list of which is available at webpack-dev-middleware. Omitting this property will result in webpack-dev-middleware using its default options.

hotClient

Type: Object|Boolean optional

The hotClient property should contain options for webpack-hot-client, a list of which is available at webpack-hot-client. Omitting this property will result in webpack-hot-client using its default options.

As of v3.0.1 setting this to false will completely disable webpack-hot-client and all automatic Hot Module Replacement functionality.

Using with koa-compress

When using koa-webpack with koa-compress, you may experience issues with saving files and hot module reload. Please review this issue for more information and a workaround.

Server-Side-Rendering

When serverSideRender is set to true in config.devMiddleware, webpackStats is accessible from ctx.state.webpackStats.

app.use(async (ctx, next) => {
  const assetsByChunkName = ctx.state.webpackStats.toJson().assetsByChunkName;
  // do something with assetsByChunkName
})

For more details please refer to: webpack-dev-middleware

Using with html-webpack-plugin

When using with html-webpack-plugin, you can access dev-middleware in-memory filesystem to serve index.html file:

koaWebpack({
  config: webpackConfig
}).then(middleware => {
  app.use(middleware)

  app.use(async ctx => {
    const filename = path.resolve(webpackConfig.output.path, 'index.html')
    ctx.response.type = 'html'
    ctx.response.body = middleware.devMiddleware.fileSystem.createReadStream(filename)
  })
})

Contributing

Please take a moment to read our contributing guidelines if you haven’t yet done so.

CONTRIBUTING

Attribution

This module started as a fork of koa-webpack-middleware

License

MPL

你可能感兴趣的文章:

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47612.html

文章标题:koa-webpack

回到顶部