热更新很简略,须要应用到 nodemon。
用法如下:
npm i nodemon -D
// package.json
"scripts": {"start": "nodemon src/index.js"},
而后运行 npm run start
es 语法反对
这里须要用到如下插件:
webpack & webpack-cli
clean-webpack-plugin: 革除 dist 目录
webpack-node-externals: 不对 node_modules 进行解决
@babel/core: es6 反对
@babel/node: 调试应用
@babel/preset-env: 新语法的反对
babel-loader
cross-env: 环境变量的解决
webpack.config.js 配置如下:
const path = require('path');
var nodeExternals = require('webpack-node-externals');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpackconfig = {
target: 'node',
mode: 'development',
entry: {server: path.join(__dirname, 'src/index.js')
},
devtool: 'eval-source-map',
output: {filename: '[name].bundle.js',
path: path.join(__dirname, './dist')
},
module: {
rules: [
{test: /\/(js|jsx)$/,
use: {loader: 'babel-loader'},
exclude: [path.join(__dirname, '/node_modules')]
}
],
},
externals: [nodeExternals()],
plugins: [new CleanWebpackPlugin()
],
node: {
console: true,
global: true,
process: true,
Buffer: true,
__filename: true,
__dirname: true,
setImmediate: true,
path: true
}
}
module.exports = webpackconfig
.babelrc 配置如下:
{
"presets": [
[
"@babel/preset-env",
{
"targets": {"node": "current"}
}
]
]
}
而后执行如下命令:
npx babel-node src/index.js
就能够应用 import 语法了。
当然,我还想联合应用热更新怎么办呢?
"scripts": {
"start": "nodemon src/index.js",
"start:es6": "nodemon --exec babel-node src/index.js"
},