# 环境准备

Node环境

# webpack基本配置概念

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

一般会以两个模式来分别搭建 Webpack 的配置，开发模式development，生产模式production

# 创建基本项目目录

webpack_code # 项目根目录（所有指令必须在这个目录运行）
	└── public # 项目html文件
    	├── index.html # index.html文件
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js 
        │   └── sum.js
        └── main.js # 项目主文件
	└── webpack.config.js
1
2
3
4
5
6
7
8
9

# 初始化项目

npm init -y // -y 所有属性默认设置
1

目录中将会出现

  • package.json 文件

# 使用 npm 安装webpack 依赖

npm i webpack webpack-cli -D
1
  • webpack：是一个流行的前端资源打包工具，可以将多个文件、模块等打包成一个或多个文件。
  • webpack-cli：是 webpack 的命令行界面，提供了一些命令来帮助用户更方便地使用 webpack。

# 基本配置属性

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

// webpack.config.js

module.exports = {
  // 入口  指示 Webpack 从哪个文件开始打包
  entry: "",
  // 输出 指示 Webpack 打包完的文件输出到哪里去，如何命名等
  output: {},
  // 加载器 webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
  module: {
    rules: [],
  },
  // 插件 扩展 Webpack 的功能 开发模式：development && 生产模式：production
  plugins: [],
  // 模式
  mode: "",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 注意：webpack默认只能处理JS、JSON文件

webpack默认只能处理JS、JSON文件，如果想处理其他资源文件，比如样式资源、字体图标、图片资源、html 资源等, 需要借助 loader （需要提前引入对应的资源处理Loader，比如处理css样式文件的，css loader、 style loader），Webpack 才能解析和编译。

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源

我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用

官方文档找不到的话，可以从社区 Github 中搜索查询

Webpack 官方 Loader 文档 (opens new window)

# 配置webpack.config.js 并执行

const path = require("path");

module.exports = {
  // 入口
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    // 'dist' output 文件夹名称
    path: path.resolve(__dirname, "dist"),
    // 输出的文件名
    filename: "main.js",
    clean: true, // 在生成文件之前清空 output 目录
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // development or production
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# CMD执行

  • # 直接执行默认生产模式
npx webpack
1
  • # 开发模式
npx webpack ./src/main.js --mode=development

// 开发模式打包的JS文件格式 和 生产环境的不同
// 开发模式打包的JS文件格式为立即执行函数格式，生产环境的为正常JS文件，具体自行实践时对比
1
2
3
4
  • # 生产模式
npx webpack ./src/main.js --mode=production
1

npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

--mode=xxx：指定模式（环境）。

# 观察输出文件

默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了

# 开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。

这个模式下我们主要做两件事：

  • 编译代码，使浏览器能识别运行

开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源

  • 代码质量检查，树立代码规范

提前检查代码的一些隐患，让代码运行时能更加健壮。

提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。