前端实践项目（四）使用koa搭建开发环境

目录

　　该系列的总目录， https://www.cnblogs.com/shadoll/p/14637373.html

一.说明

　　开启前端服务的开发工具很多，上一篇就使用了webpack-dev-server，但它的编译文件会存放在内存中，有可能造成电脑卡顿。

　　本文使用koa来开启服务。koa是一个在nodejs中的轻量级web开发框架，它提供了丰富的函数及中间件可以使用，上手十分容易。

二.安装和配置

 　　执行命令，安装插件。

cnpm install koa@2.3.0 --save-dev

cnpm install koa-static@3.0.0 --save-dev

　　创建app.js。

//引用
const Koa = require('koa');
const koaStatic = require('koa-static');
const path = require('path');


//创建koa对象
const app = new Koa();

//使用static中间件，用于托管静态文件。通过url地址可以直接读取静态文件
app.use(koaStatic(path.join(__dirname, './dist')));

const port = 8222;
//开启服务
app.listen(port, () => {
    console.log(`Listening on http://localhost:${port}`);
});

三.使用

　　通过webpack来编译项目，打包的内容用koa开启服务来访问。输入下面的命令，编译和开启服务，在浏览器打开localhost:8222就可以查看页面了。

webpack

node app.js