Webpack5入门到原理3：基本配置

在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。

5 大核心概念

• entry（入口）

  指示 Webpack 从哪个文件开始打包

  • output（输出）

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

    • loader（加载器）

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

      • plugins（插件）

        扩展 Webpack 的功能

        • mode（模式）

          主要由两种模式：

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

            准备 Webpack 配置文件

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

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

            Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范

            修改配置文件

            配置文件

            // 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", // 开发模式
            };

            运行指令

            npx webpack

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

            小结

            Webpack 将来都通过 webpack.config.js 文件进行配置，来增强 Webpack 的功能

            我们后面会以两个模式来分别搭建 Webpack 的配置，先进行开发模式，再完成生产模式