当先锋百科网

首页 1 2 3 4 5 6 7

关于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

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