核心概念
- 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
此时功能和之前一样，也不能处理样式资源。
开发模式介绍
开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事：
- 编译代码，使浏览器能识别运行
开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源
- 代码质量检查，树立代码规范
提前检查代码的一些隐患，让代码运行时能更加健壮。
提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。
小结
Webpack 将来都通过 webpack.config.js 文件进行配置，来增强 Webpack 的功能。
