【九月打卡】第10天 Koa配置开发热加载，ES6语法支持&Webpack配置

第一模块 学习课程

名称：六大场景 梳理开发痛点 解锁前端进阶路

章节名称: 6-4 Koa开发热加载，ES6语法支持

讲师:Brian

第二模块 课程内容

nodemon - 简单地监视脚本的变化 -> 可以用于开发热加载

通过本章学习，我们可以去配置一个koa的生产环境，在开发过程中，我们可以去实时地对代码进行一个编辑。

代码一旦编辑保存之后，koa的服务即可重新启动起来，同时也对ES6语法有支持。

npm install -D nodeman 开发环境安装

webpack.config.js  webpack的入口文件

npm install -D clean-webpack-plugin（主要用于清理dist目录下的文件）

                        webpack-node-externals（主要对node_modules下的文件作排除处理）

                        @babel/core（babel的核心） 

                        @babel/node（后面调试需要用到）@babel/present-env（对babel新的特性进行支持）

                        @babel-loader（webpack会使用到的loader）

                        cross-env（设置环境变量processEnv）

es6语法文件可以使用babel-node进行加载 babel-node src/index.js

nodemon -exec babel-node src/index.js

第三模块 课程收获

手写webpack.config.js配置

const path = require('path')
const nodeExcternals = require('webpack-node-externals')
const { CleanWebpackPlugins } = require('clean-webpack-plugin')
const webpackconfig = {
    target: 'node',
    mode: 'development',
    entry: {
        server: path.join(__dirname, 'src/index.js')
    }
    output: {
            filename: '[name].bundle.js'
        path:'./dist'
    }
    devtools: 'eval-source-map',
    module: {
        rules: [
           {
               test: /\.(js|jsx)$/,
               use: {
                   loader: 'babel-loader'
               },
               exclude: [path.join(__dirname, '/node_modules')]
           } 
        ]
    },
    externals: [nodeExcternals()]
    plugins: [
        new CleanWebpackPlugin()
    ],
    node: {
        console: true,
        global: true,
        process: true,
        Buffer: true,
        __filename: true,
        __dirname: true,
        setImmediate: true,
        path: true
    }
}

module.exports = webpackconfig

第四模块 学习打卡截图