一、Webpack5 入门到原理（面试开发一条龙）

1. webpack 介绍&基本使用

1. 创建目录

先创建以下目录

python 复制代码

sgg-webpack # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

2. 创建文件

count.js

js 复制代码

export default function count(x, y) {
  return x - y;
}

sum.js

js 复制代码

export default function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

main.js

js 复制代码

import count from "./js/count";
import sum from "./js/sum";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

3. 安装依赖

bash 复制代码

yarn i webpack webpack-cli -D

4. 启动 webpack

开发模式启动

bash 复制代码

 npx webpack ./src/main.js --mode=development

就可以看到当前目录下面生成了dist文件夹。

生产模式启动

bash 复制代码

 npx webpack ./src/main.js --mode=production

可以看见 productin 模式下打包后的文件里面少了很多东西。

4. 小结

当前我们只用 webpack 来打包 js 文件，那么其他资源怎么打包呢？例如 css js vue .jsx，这个在后面会写到。

2. 基本配置

1. 5大核心概念

entry(入口) 指示 webpack 从那个文件开始打包。
output(输出) 指示 webpack 打包完的文件输出到哪里去，怎么文件怎样命名
loader(加载器) webpack 本身只能处理 JS JSON 等资源，其他类型的资源需要 loader 的帮助，webpack 才能够解析。
plugins(插件) 扩展 webpack 的功能
mode(模式) 指定打包的模式，主要有两种

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

2. 准备webpack配置文件

在项目的根目录下面创建 webpack.config.js 文件

js 复制代码

const path = require("path");

module.exports = {
  // 入口
  entry: "./src/main.js",
  // 出口
  output: {
    // __dirname 是当前文件的文件夹绝对路径
    // path.resolve 方法返回的是一个绝对路径
    // path 是文件输出的目录
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

运行命令

复制代码

npx webpack

效果和第一次用命令行打包是一样的

3. 小结

之后我们都会通过 webpack.config.js 文件来进行配置，并增强 webpack 的功能。

在平时的开发中我们基本上都会进行区分，开发模式，和生产模式，来编写 webpack 的配置文件。