第一模块 学习课程
名称:六大场景 梳理开发痛点 解锁前端进阶路
章节名称: 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第四模块 学习打卡截图