为什么需要打包工具？
- 前端开发中的各种框架（React、Vue）、ES6的模块化语法、less/sass/stylus等css预处理器。这些代码是不能直接在浏览器中运行的，需要一个中间的转换工具来将这些代码处理成浏览器能识别的代码。
- 打包工具还能压缩代码、处理兼容性问题、提升代码性能、提高开发效率等等。
基本使用
Webpack以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。
开始使用
1. 资源目录
webpack_code # 项目根目录（所有指令必须在这个目录运行）
└── src # 项目源码目录
├── js # js文件目录
│ ├── count.js
│ └── sum.js
└── main.js # 项目主文件
2. 创建文件
- count.js
export default function count(x, y) {
return x - y;
}
- sum.js
export default function sum(...args) {
return args.reduce((p, c) => p + c, 0);
}
- main.js
import count from "./js/count";
import sum from "./js/sum";
console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
3. 下载依赖
- 初始化
package.json
注意：package.json中的 name 属性不能是 Webpack， 否则安装依赖会报错
npm init -y
- 下载依赖
npm install webpack webpack-cli -D
4. 启用 Webpack
注意：下面是通过命令的方式启动，后面我们会介绍通过配置的方式，启动命令就会更简单
- 开发模式
npx webpack ./src/main.js --mode=development
- 生产模式
npx webpack ./src/main.js --mode=production
5. 观察输出文件
默认Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了
以上就是Webpack的基本使用了，下面我们通过配置的方式来学习Webpack。
基础配置
在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。
5 大核心概念
- entry（入口） 指定webpack是从那个文件开始打包
- output（输出目录） 指示 Webpack 打包完的文件输出到哪里去，如何命名等
- loader（加载器） Webpack本身只能处理js文件，对于其它非js文件需要借助loader处理
- plugins（插件） 用来扩展Webpack的功能
- mode（模式）
指定Webpack的环境，主要有两种模式
- 开发模式：development
- 生产模式：production
准备配置文件
在项目的根目录下新建文件 webpack.config.js
module.exports = {
// 入口
entry: "",
// 输出
output: {},
// 加载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "",
}
注意：Webpack 是基于 Node.js 运行的，所以采用 Common.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
开发模式介绍
开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事：
-
译代码，使浏览器能识别运行。
开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源
-
代码质量检查，树立代码规范
提前检查代码的一些隐患，让代码运行时能更加健壮。
提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。
