webpack5学习（一）：基本使用

一、基本使用

Webpack 是一个静态资源打包工具。
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。
输出的文件就是编译好的文件，就可以在浏览器段运行了。
我们将 Webpack 输出的文件叫做 bundle。

1、功能介绍

Webpack 本身功能是有限的:

• 开发模式：仅能编译 JS 中的 ES Module 语法
• 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

2、开始使用

1. 下载依赖

npm i webpack webpack-cli -D

2. 启用 Webpack

# 开发模式
npx webpack ./src/main.js --mode=development
# 生产模式
npx webpack ./src/main.js --mode=production

# npx webpack: 是用来运行本地安装 Webpack 包的。
# ./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。
# --mode=xxx：指定模式（环境）。

3. 观察输出文件

默认 Webpack 会将文件打包输出到 dist 目录下

Webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错。
所以我们学习 Webpack，就是主要学习如何处理其他资源。

二、基本配置

1、5大核心概念

• entry（入口）
  指示 Webpack 从哪个文件开始打包

• output（输出）
  指示 Webpack 打包完的文件输出到哪里去，如何命名等

• loader（加载器）
  webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

• plugins（插件）
  扩展 Webpack 的功能

• mode（模式）
  主要由两种模式：
  开发模式：development
  生产模式：production

2、准备 Webpack 配置文件

在项目根目录下新建文件：webpack.config.js

//Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范
module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

3、修改配置文件

1. 配置文件

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
    //filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

2. 运行指令

npx webpack

此时功能和之前一样，也不能处理样式资源