webpack5基本配置

关于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下输入

"start": "npx nodemon src/index.js"

重新打开终端，输入熟悉的npm run start即可，项目重新跑起来了

在上面我们配置了webpack文件，所以还是通过webpack来跑项目，更改package.json文件下的scripts

"start": "nodemon --exec babel-node src/index.js"

至此，项目的基本配置接完成，当然随着项目的不断深入，扩大，这个配置还是会显得有点少，根据自己的业务在增加配置即可