关于webpack5的基本配置
首先进行webpack的安装
npm install webpack webpack-cli -D
其次对一些插件的安装
npm install -D clean-webpack-plugin webpack-node-externals
最后安装babel
npm install @babel/core @babel/node @babel/preset-env babel-loader cross-env -D
注意:如果是windows系统,@babel/node可以进行全局安装,如果后面会出现Cannot find module @babel/node的问题,在重新安装在开发环境
关于webpack,babel的版本
配置
在项目的根目录下创建文件,文件名为webpack.config.js
如果报错,就在项目的根目录下创建文件.babelrc,在文件里进行简单的配置,将如下代码放入其中
{
"presets": [
["@babel/preset-env", {
"targets": {
"node": "current"
}
}]
]
}
关于热重载
打开npmjs.com,搜索nodemon
安装:npm install -D nodemon
安装成功之后,可以在node-modues文件夹下找到一个.bin的文件夹,在里面就会看到nodemon
项目运行
在项目终端输入npx nodemon src/index.js,回车,就可以看到项目运行起来了,更改一个文件,会看到nodemon重新加载,不需要自己重新输入
注意:src/index.js是项目的入口文件,在这里我的项目入口文件就是src/index.js,这个根据自己的项目而定
但是这样输入会显得有点麻烦,打开package.json文件,在scripts下输入
重新打开终端,输入熟悉的npm run start即可,项目重新跑起来了
在上面我们配置了webpack文件,所以还是通过webpack来跑项目,更改package.json文件下的scripts
至此,项目的基本配置接完成,当然随着项目的不断深入,扩大,这个配置还是会显得有点少,根据自己的业务在增加配置即可