五分钟看懂webpack-个人笔记

什么是webpack

官方说 他是 一个静态资源打包工具
主流打包工具 Grunt、Gulp、Parcel、Webpack、Rollup、Vite

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

两大模式

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

五大核心

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

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

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

plugins（插件）
扩展 Webpack 的功能

mode（模式）
主要由两种模式：

开发模式：development
生产模式：production

使用webpack

1. 初始化package.json npm init -y
2. 安装依赖 npm i webpack webpack-cli -D
3. 在项目根目录下新建文件：webpack.config.js

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

4. 修改配置文件

// 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",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

5. 运行

npx webpack

自定义webpack

loader官方文档

Css,Less,Sass,Style,图片视频等等，都属于webpack配置中的加载器，所以我们只需要翻阅文档找到对应的依赖安装并配置在webpack.config里即可

举例：Css
文档：

1. 我就需要先安装依赖，执行npm i css-loader style-loader -D （个别文档中指引会少依赖）
2. 配置webpack.config

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        // 使用正则表达式
        test: /\.css$/,
        // 下载的loader依赖
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};