1.webpack的安装

在终端运行命令 ，安装webpack到全局，需要安装webpack的两个包：
npm install webpack@5.42.1 -D
npm install webpack-cli@4.7.2 -D
或者直接
npm install webpack@5.42.1 webpack-cli@4.7.2 -D

-S 是—sava的简写
-D 是—save-dev的简写

2.配置webpack

在项目的根路径下创建名为webpack.config.js的配置文件，并初始化里面的配置如下

module.exports = {
    mode: 'development'//mode用来指定构造模式，可选值未development 和production
}

在package.json的scripts节点下，新增dev脚本如下：

"script": {
    "dev": "webpack"//script节点下的脚本，可以通过npm run 执行，例如npm run dev
}

使用npm run dev 可以运行dev

3.entry和output

在webpack4.x和5.x的版本中，有如下的默认约定
默认打包的入口文件为 src -> index.js
默认输出的文件路径为dist -> main.js

在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口。实例代码如下

const path = require('path)//这一步可以使用node.js中的路径 操作模块
module.exports = {
    entry: path.join(__dirname, './src/index.js'),//打包入口文件的路径
  output: {
      path: path.join(__dirname, './dist'),
      filename: 'bundle.js'//文件输出名
  }
}

4.配置和安装webpack-dev-server

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常使用的webpck插件有如下两个；
1.webpacck-dev-server
类似于node.js阶段用到的nodemon工具
每当修改了源代码，webpack会自动进行项目的打包和构建
2.html-webpack-plugin
webpack中的html插件（类似于一个模板引擎插件）
可以通过此插件自定制index.html页面的内容。

使用webpack-dev-server
运行如下的命令，即可在项目中安装此插件：
npm install webpack-dev-server@3.11.2 -D

配置webpack-dev-server
修改package.json -> scripts 中的dev命令如下：

"scripts": {
    "dev":"webpack serve",//script 节点下的脚本，可以通过npm run运行
}

再次运行npm run dev命令，重新进行项目的打包
在浏览器中访问http://localhost:8080 地址，查看自动打包效果。

注意：webpack-dev-server 会启动一个实时打包的http服务器。