温馨提示：webpack使用前提电脑上安装了node, 查看node版本命令： node -v

查看node版本截图如下：

1.初始化文件：npm init -y

之后就会生成 package.json文件，截图如下：

package.json 文件内容如下：

2.安装 webpack和 webpack -cli npm i webpack webpack-cli --save-dev

温馨提示：--save-dev 的简写是 -D 注：-D和 --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作业的），--save-dev 和 -D 建议尽量使用-D把，避免写错，也简单

npm i webpack webpack-cli -D

截图如下：

3.在当前目录下，1.新建src，在src下新建index.js文件 2.新建当前目录下创建配置文件：webpack.config.js

3.1 src里面的index.js 代码如下：

console.log("hello,webpack");

3.2 webpack.config.js 简单配置如下：

// 引入路径相关的模块path    const path = require(path)    // module.exports是common JS语法    module.exports = {    // 指定模式：开发模式    mode: development,    // 打包入口：从哪个文件开始打包，这个时候就需要引入path    // __dirname：代表当前目录 当前目录下有 src、node_modules、package.json等    // path.join() 方法：会去拼接路径    entry: path.join(__dirname, src, index.js),    // 出口文件：打包好的文件放到哪里    output: {    // 文件夹名称一般命名为dist    path: path.join(__dirname, dist),    // 打包生成的文件名，会在dist里面    filename: "main.js"    },    }

这样的话，我们就完成了最简单的webpack配置了，在package.json 里面配置打包命令即可打包了，配置命令如下：

"build": "webpack"4.在终端输入命令打包即可，npm run build npm run build

截图：