「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」。
一、前提
在使用 webpack 之前，首先要确保已经安装了 Node。
二、webpack 安装
首先选一个盘符，创建一个项目目录 “webpack_project”。
在 cmd 中打开该目录，使用 npm init 命令进行初始化。
之后会生成一个 package.json 文件用于管理项目版本和依赖。
打开 package.json，内容如下：
为方便操作，我直接在 VSCode中打开该项目。
接下来，使用 npm 或 yarn 来安装 webpack，命令如下：
npm install webpack webpack-cli -D
# 或者
yarn add webpack webpack-cli -D
安装完以后，我们可以在 package.json 文件中看到对应的 webpack 版本依赖：
同时在项目目录中会多出以下2个文件：
至此，webpack 算是安装完了。
三、webpack 构建
安装完后，我们可以使用 npx webpack 命令来运行项目中安装好的 webpack，实际上就是运行构建：
发现报错，导致这些错误的原因是因为我们并没有需要构建的代码，那么接下来我们手动添加2个代码文件，src/inex.js 和 src/utils/hello.js，其中 index.js 是对 hello.js 的引用：
再次运行 npx webpack ：
错误消失，并且项目中多了一个文件 dist/main.js，这个文件就是构建的最终结果：
当然，为了方便起见，我们也可以将 npx webpack 命令配置在 package.json 中：
这样以后就可以使用 npm run build 或 yarn build 命令来运行构建了（其实就是所谓的打包）。
四、webpack 的配置文件
接下来，我们再项目的根目录下创建一个 webpack.config.js 文件作为 webpack 的配置文件：
const path = require('path')
module.exports = {
mode: 'development', // 指定构建模式
entry: './src/index.js', // 指定构建入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 指定构建生成文件所在路径
filename: 'bundle.js', // 指定构建生成的文件名
}
}
运行 npm run build，发现构建后的文件名变成了 dist/bundle.js：
webpack 的配置文件一般是用来区分开发环境和生产环境的构建，可以通过配置构建模式来指定环境，还可配置入口文件和生成路径。
五、开发环境配置
我们可以使用 webpack-dev-server 来配置开发环境，具体做法如下：
首先安装 webpack-dev-server，命令如下：
npm install webpack-dev-server -D
# 或者
yarn add webpack-dev-server -D
命令执行完以后，如果 package.json 文件中出现以下代码，则表示安装成功：
同样的，我们也可以将启动开发服务器的命令配置在 package.json 文件中：
除此以外，由于 webpack 不能处理 html 文件，所以我们还需要一个 index.html 文件作为页面的基础，首先在 dist 目录下创建一个 index.html 文件：
并且在 webpack.config.js 配置文件中添加指定开发服务器启动路径的配置：
运行 npm run serve 命令启动 webpack-dev-server，即可使用浏览器打开 http://localhost:8080/，访问 dist 下的 html 文件：
打开控制台就可以看到输出了 ”hello world!“ ：
