一，koa的热加载配置

1，nodemon热加载中间件

它会去监听js代码的变化，从而重启服务器，而不需要再人为地手动区重启服务器了。
https://www.npmjs.com/package/nodemon

2，开发过程中安装这个依赖

npm install -D nodemon

3,使用nodemon来启动服务器代码

在这里插入图片描述
npx命令等价于node node_module/bin 就是运行这个目录下地文件。
看黄色的字可以知道，这里已经开始使用这个nodemon来监听js代码了。

当我改动js文件的时候，它就会自动运行了。不需要手动再修改一遍。

4，更改package.json的脚本，让script来运行服务器

在这里插入图片描述
于是，这个服务器，就可以使用npm run start来运行了。

二，配置webpack，让我们的项目能够使用es6的语法

1，安装webpack。webpack4.0之后，webpack和webpack cli已经独立了，所以都要安装

npm install -D webpack webpack-cli

2,新建webpack.config.js文件作为webpack的配置文件

npm install -D clean-webpack-plugin webpack-node-externals @babel/core @babel/preset-env babel-loader cross-env

编写webpack.config.js的配置

const path=require('path')
const nodeExcternals=require('wepack-node-externals')  //排除一些我们不会使用到的node模块
const {
    
    CleanWebpackPlugin}=require('clean-webpack-plugin')  //帮助我们删除旧的文件(如修改了图片文件夹名字后打包，旧打包处的文件夹还在)，然后在进行打包。

const webpackconfig={
    
    
    target:'node',
    mode:'development',
    entry:{
    
    
        srever:path.join(__dirname,'src/index.js')
    },
    output:{
    
    
        filename:'[name].bundle.js',    //打包出口的文件名字，原有名字.bundle.js
        path:path.join(__dirname,'./dist')
    },
 //   devtools:'eval-source-map',         //方便后期调试的
    module:{
    
    
        rules:[
            {
    
    
                test: /\.(js|jsx)$/,
                use:{
    
    
                    loader:'babel-loader'                 //匹配到js文件，就使用babel来处理
                },
                exclude:[path.join(__dirname,'/node_modules')]  //排除这个文件夹下的js文件
            }
        ]
    },
    externals:[nodeExcternals()],  //排除一些我们不会使用到的node模块
    plugins:[
        new CleanWebpackPlugin()
    ],
  //  node:{
    
    
  //      console:true,
   //     global:true,
   //     process:true,
   //     Buffer:true,
   //     __filename:true,
   //     __dirname:true,
   //     setImmediate:true,
    //    path:true
   // }
}

module.exports=webpackconfig

3，新建.babelrc，然后配置

{
    
    
    "presets": [
        [
            "@babel/preset-env",
            {
    
    
                "targets":{
    
    
                    "node":"current"
                }
            }
        ]
    ]
}

然后运行npx webpack 就可以打包成功
在这里插入图片描述

4，这时候，就可以使用es6语法

npm install --save-dev @babel/node

如果不用webpack打包，而是直接写成es6的语法，就需要安装这个：
在这里插入图片描述
改写成es6语法：

运行项目：

 npx babel-node src/index.js

如果想要热加载，就这样写：

npx nodemon --exec babel-node src/index.js

使用package.json来写就是：

  "scripts": {
    
    
    "start": "nodemon src/index.js",
    "start:es6":"nodemon --exec babel-node src/index.js"
  },

nodejs后台系列--第四篇--koa（三）