webpack5基础_3webpack5大基础核心概念

学习前言：可以参考webpack官网

一、五大核心概念：
1、entry（入口）
指示 Webpack 从哪个文件开始打包

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

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

4、plugins（插件）
扩展 Webpack 的功能

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

二、准备 Webpack 配置文件
在项目根目录下新建文件：webpack.config.js

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

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

三、修改 Webpack 配置文件
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",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

2、运行命令：

// npx 是调用 node_modules/bin/ 下面的可执行程序
npm webpack

3、运行结果

六、git源码仓库：在 package_3 文件下
https://github.com/linjyuan/webpack_code