当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

koa-webpack-middleware

webpack dev&hot middleware for koa2

授权协议 Readme

开发语言 JavaScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区不详

投递者东门深

操作系统跨平台

开源组织无

适用人群未知

软件概览

koa-webpack-middleware

webpack-dev-middleware for koa2 with HMR(hot module replacement) supports.

Install

$ npm i koa-webpack-middleware -D

Depends

This middleware designd for koa2 ecosystem, make sure installed the right version:

npm i koa@next -S

Usage

See example/ for an example of usage.

import webpack from 'webpack'
import { devMiddleware, hotMiddleware } from 'koa-webpack-middleware'
import devConfig from './webpack.config.dev'
const compile = webpack(devConfig)
app.use(devMiddleware(compile, {
    // display no info to console (only warnings and errors)
    noInfo: false,

    // display nothing to the console
    quiet: false,

    // switch into lazy mode
    // that means no watching, but recompilation on every request
    lazy: true,

    // watch options (only lazy: false)
    watchOptions: {
        aggregateTimeout: 300,
        poll: true
    },

    // public path to bind the middleware to
    // use the same as in webpack
    publicPath: "/assets/",

    // custom headers
    headers: { "X-Custom-Header": "yes" },

    // options for formating the statistics
    stats: {
        colors: true
    }
}))
app.use(hotMiddleware(compile, {
  // log: console.log,
  // path: '/__webpack_hmr',
  // heartbeat: 10 * 1000
}))

HMR configure

webpack plugins configure

plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
]

webpack entry configure

$ npm i eventsource-polyfill -D

entry: {
  'index': [
    // For old browsers
    'eventsource-polyfill',
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
    'index.js']
},

webpack loader configure

$ npm i babel-preset-es2015 babel-preset-stage-0 -D

{
  test: /\.js$/,
  loader: 'babel',
  query: {
    'presets': ['es2015', 'stage-0']
    }
  },
  include: './src'
}

HMR for react project

$ npm i babel-preset-react babel-preset-react-hmre -D

{
  test: /\.jsx?$/,
  loader: 'babel',
  query: {
    'presets': ['es2015', 'stage-0', 'react'],
    'env': {
      'development': {
        'presets': ['react-hmre']
      }
    }
  },
  include: './src'
}

put the code in your entry file to enable HMR

React project do not need
```
if (module.hot) {
  module.hot.accept()
}
```

That's all, you're all set!

使用案例

koa中webpack热加载&&NODE_ENV配置

原文地址背景目前在用koa+react+redux搭建一个微信后台，需要用到webpack热加载的方式方便进行开发，同时参考redux官方例子的配置方式，发现process.env.NODE_ENV一直是undefined，所以有了这篇文章。本文主要介绍express以及koa中webpack热加载的实现方式，同时解决process.env.NODE_ENV传递的问题。 express热加载
骚年，Koa和Webpack了解一下？

有必要声明下，很多人在没看完这篇文章之后，就评论一些和文章主题不相符的内容。这篇文章主要讲述的是如何在本地开发环境下通过启动node服务器之后，无缝启动webpack，从而达到前后端配置一体化。适合做node全栈项目、node中间层，配合前端项目、等等。前言日常开发中，我们用的都是使用Webpack这类构建工具进行模块化开发。或者使用基于create-react-app和vue-cli等
【前端工程化】五：webpack5快速入门（二）

webpack-dev-server 要实现在开发时修改了文件可以自动编译展示，可以使用webpack的watch属性为true和vscode的live server插件，即观察模式 // webpack.config.js module.exports = { watch: true, ... } 但是这样做有几个缺点：所有源代码都会重新编译因为我们使用了clean-web
koa2实现简易的webpack-dev-server

koa2实现简易的webpack-dev-server热更新原文https://github.com/zhuangZhou/Blog/issues/3 闲来无事，用koa2撸了一个简易的webpack-dev-server;其实网上很多express搭建的热更新，但是koa2很少；欢迎大佬拍砖和赐教；源码配置基本的webpack 1、下载安装包 webpack webpack-cli htm
koa2 + webpack 热更新

网上有很多express+webpack的热更新，但是koa2的很少，这两天研究了一下子，写一个简单的教程。 1、需要的包 webpack:用于构建项目 webpack-dev-middleware:用于处理静态文件 webpack-hot-middleware:用于实现无刷新更新 2、webpack.config配置 entry配置webpack-hot-middleware脚本 entry:
Webpack5梳理

1. 工程化发展 npm scripts -> Grunt -> Gulp -> Fis3 -> webpack(RollUp&vite) 2. 起步webpack 1. webpack已经发布到5了，但整体配置思路没变化，新建空文件夹 "执行npm init -y" 初始化npm info 生成package.json文件 "npm i webpack webpack-

koa-webpack-middleware

koa-webpack-middleware

Install

Depends

Usage

HMR configure

同类工具

相关阅读

相关文章

相关问答

相关文档