前提条件

注：webpack是基于 Node.js 开发出来的一个前端工具，所以在使用 Webpack 之前必须安装好 Node.js 且是最新版本（Node.js 官网：https://nodejs.org/en/，建议最新的LTS版本）。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能， 或者缺少相关 package。

  1. node -v      // 查询 node 版本命令
  2. npm -v       // 查询 npm 版本命令

1. webpack 的安装

安装 webpack 需要安装两个包：webpack 主包；webpack-cli 包
webpack-cli：表示可以在命令行里面执行 webpack 命令
安装完毕后，可查询 webpack 及 webpack-cli 的版本：webpack -v

① 全局安装

npm install webpack webpack-cli —global

全局安装完后，可以在任意目录下执行 webpack 。但并不推荐在全局中安装 webpack，因为这会使项目的 webpack 版本被锁定；并且在使用不同 webpack 版本的项目里面可能会导致构建失败
卸载命令：

npm uninstall webpack webpack-cli —global

② 局部安装（推荐）

只在本地的工作目录下安装
在安装本地目录的 webpack 之前，需要安装一个 npm 的包管理工具。安装完后会在项目的根目录下面生成一个 package.json 文件

npm init -y

然后执行安装命令

npm i webpack webpack-cli —save-dev

提示： 是否使用 —save-dev 取决于你的应用场景。假设你仅使用 webpack 进行构建操作，那么建议你在安装时使用 —save-dev 选项，因为可能你不需要在生产环境上使用 webpack。如果需要应用于生产环境，请忽略 —save-dev 选项。

会产生一个依赖包—node_modules 和一个 package-lock.json 文件（不用管它们）

2. webpack 的运行

① 全局安装

webpack // 运行后即可打包项目文件 webpack —stats detailed // 可以看到打包过程中的详细信息

② 局部安装

npx webpack

打包完后会在项目文件夹下生产一个 dist 文件夹，dist 文件夹中就是打包完后的文件。默认情况下 src 文件夹下的 index.js 文件为打包的入口文件

3. 自定义 webpack 配置

webpack-cli 提供了丰富的终端命令行指令，可以通过 webpack —help（npx webpack —help） 来查看

在项目的根目录下创建 webpack.config.js 配置文件（文件名只能是这个）

  1. const path = require('path')
  3. module.exports = {
  4.     // 设置项目打包的入口文件
  5.     entry: './src/js/index.js',
  7.     // 设置项目打包的出口文件名
  8.     output: {
  9.         // 指定输出文件的文件名
  10.         filename: 'bundle.js',
  11.         // 指定文件的输出路径(只能是绝对路径)
  12.         path: path.resolve(__dirname, './dist')
  13.     },
  15.     mode: 'development'
  16. }

将打包后的 js 文件—bundle.js 文件在 index.html 中引入后，然后右击 index.html 复制路径进入浏览器就可以打开了；如果不在 index.html 文件中引入打包后的 js 文件，则浏览器会报错，这是因为页面引用的JS代码，在浏览器里不能正确解析了，我们得去引用打包好了的JS才对。
image.png

4. 小案例

image.png
hello.js

  1. function hello() {
  2.     alert('Hello World!')
  3. }
  5. export default hello

index.js

  1. import hello from './hello'
  3. hello()

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Webpack5</title>
  8. </head>
  9. <body>
  10.     <!-- 引入打包后的 js 文件 -->
  11.     <script src="../dist/bundle.js"></script>
  12. </body>
  13. </html>

右击 index.html 文件复制路径，将其粘贴到浏览器中，如果有弹窗，即打包成功

5. webpack 项目的目录结构

通常会在项目文件夹中建立一个 src 文件夹用来存放项目文件，然后在 src 文件夹下建立一个 index.html 文件
image.png