Wepback + koa2 配置开发环境

waterc 发布于2019-08-22 15:05 / 2882人阅读

摘要：把处理后的配置文件传递给服务器，不过我们在使用它之前，需要把它改造成中间件。因为通过生成的模块是写入到内存中的，所以我们需要修改开发环境中的配置项修改此配置项安装封装成中间件。

前言

webpack提供了webpack-dev-server模块来启动一个简单的web服务器，为了更大的自由度我们可以自己配置一个服务器，下面介绍如何用koa2来实现。

wepack-dev-middleware

wepack-dev-middleware把webpack处理后的配置文件传递给服务器，不过我们在使用它之前，需要把它改造成koa中间件。

安装wepack-dev-middleware：

npm install wepack-dev-middleware -D

封装成koa中间件。devMiddleware.js：

// 改造成koa中间件
const webpackDev  = require("webpack-dev-middleware");

const devMiddleware = (compiler, opts) => {
  const middleware = webpackDev(compiler, opts);
  return async (ctx, next) => {
    await middleware(ctx.req, {
      end: (content) => {
        ctx.body = content;
      },
      setHeader: (name, value) => {
        ctx.set(name, value);
      }
    }, next);
  };
};

module.exports=devMiddleware;

webpack-hot-middleware

webpack-hot-middleware模块主要用来实现热替换，也就是说我们在修改文件后只需刷客户端页面就能看到效果了。因为通过webpack-hot-middleware生成的模块是写入到内存中的，所以我们需要修改开发环境中的output配置项：

// webpack.dev.conf.js
output: {
  filename: "[name].[hash].js",
  path: "/" // 修改此配置项
}

安装webpack-hot-middleware：

npm install webpack-hot-middleware -D

封装成koa中间件。hotMiddleware.js：

// 改造成koa中间件

const webpackHot = require("webpack-hot-middleware")
const PassThrough = require("stream").PassThrough;

const hotMiddleware = (compiler, opts) => {
  const middleware = webpackHot(compiler, opts);
  return async (ctx, next) => {
    let stream = new PassThrough();
    ctx.body = stream;
    await middleware(ctx.req, {
        write: stream.write.bind(stream),
        writeHead: (status, headers) => {
          ctx.status = status;
          ctx.set(headers);
        }
      }, next);
  };
};


module.exports = hotMiddleware;

koa2实现服务器

安装koa：

npm install koa -D

server.js：

const Koa = require("koa");
const webpack = require("webpack"); // webpack模块

const config = require("./webpack.dev.conf"); // 开发环境模块
// 中间件容器，把webpack处理后的文件传递给一个服务器
const devMiddleware = require("./devMiddleware");
// 在内存中编译的插件，不写入磁盘来提高性能
const hotMiddleware = require("./hotMiddleware");
const compiler = webpack(config);

const app = new Koa();

app.use(devMiddleware(compiler, {
  publicPath: config.output.publicPath // "/"
}));
app.use(hotMiddleware(compiler));
app.listen(3000);

console.log("lostening on port 3000");

配置package.json:

"scripts": {
  "server": "node server.js --mode development"
}

启动服务器：

npm run server

通过koa2中间件配置

koa2社区也提供了封装好的中间件，例如koa-webpack和koa-webpack-middleware,不过后者已经好久没有维护了，下面我们用koa-webpack来简化配置。

安装依赖：

npm install koa-webpack -D

修改server.js:

const Koa = require("koa");
const middleware = require("koa-webpack");
const webpack = require("webpack");
const config = require ("./webpack.dev.conf.js");

const compiler = webpack(config);

const app = new Koa();

app.use(middleware({
  compiler: compiler
}));
app.listen(3000);

console.log("lostening on port 3000");

模块版本：

"devDependencies": {
  "koa": "^2.5.0",
  "koa-webpack": "^3.0.0",
  "webpack": "^4.0.1",
  "webpack-cli": "^2.0.9",
  "webpack-dev-middleware": "^3.0.0",
  "webpack-hot-middleware": "^2.21.1",
}

GPU云服务器云服务器开发环境配置 python开发环境配置 app开发环境配置 php开发环境配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93159.html

wepback入门到放弃

摘要：四配置配置规则放在的数组里，每个是一个对象，是正则匹配，匹配文件后缀名，是要用是数组是所需要的是要加载哪些文件，是忽略掉哪些文件。实现解析，用会在写入在文件顶端导入中加入插件。最近研究webpack略有小成，特此写篇博客。虽然webpack有官网api,但是个人认为webpack api一点都不人性化，不自己研究研究，根本看不懂。今天先从写webpack-dev-server开始。...

blastz 2019-08-23 10:23 评论0 收藏0
Koa2微信公众号开发(一) 本地开发调试环境搭建

摘要：本篇是该系列的第一篇，本地开发环境搭建以及接入微信。若确认此次请求来自微信服务器，原样返回参数内容，则接入生效，成为开发者成功，否则接入失败。一、简介关于微信公众号的介绍就省略了，自行搜索。注册过程也不说了。我们会直接注册测试号来实现代码。这将会是个全面讲解微信公众号开发的系列教程。本篇是该系列的第一篇，本地开发环境搭建以及接入微信。在开始之前最好去看看开发者文档微信公众平台技术文...

snifes 2019-08-22 16:35 评论0 收藏0
最好用的koa2+mysql的RESTful API脚手架，mvc架构，支持node调试，pm2部署

摘要：基于构建的服务器脚手架这是一个基于的轻量级脚手架，支持支持使用编写。脚手架可以根据不同的环境配置不同的信息运行价值，支持开发，测试，生产环境的不同参数配置。 #基于webpack构建的 Koa2 restful API 服务器脚手架这是一个基于 Koa2 的轻量级 RESTful API Server 脚手架，支持 ES6, 支持使用TypeScript编写。 GIT地址：https...

xiongzenghui 2019-08-26 14:05 评论0 收藏0
一个配置简单却功能强大的React Koa2同构isomorphic/universal项目模板

摘要：如果你还不是很了解什么是同构，请先自行。现在市面上有很多优秀同构模板，但是其中有不少不能完美解决所有难题，只有其中一部分可以，但是这一部分模板却又集成了很多难懂的黑科技，熟悉周期较长，且难以扩展和维护。如果你还不是很了解什么是同构，请先自行Google。现在市面上有很多优秀同构模板，但是其中有不少不能完美解决所有难题，只有其中一部分可以，但是这一部分模板却又集成了很多难懂的黑科技，...

wwolf 2019-08-21 12:03 评论0 收藏0
Webpack + Vue2 + Koa2 构建应用

摘要：从第一个中间件开始执行，遇到进入下一个中间件，一直执行到最后一个中间件，在逆序，执行上一个中间件之后的代码，一直到第一个中间件执行结束才发出响应。 github地址: https://github.com/zdliuccit/... 欢迎star 该构建适用PC端开发，通过配置亦可支持移动端开发具体以代码为主，持续更新.... 技术栈 Webpack3 Koa2 Axios Vue...

Bryan 2019-08-21 16:42 评论0 收藏0