98 lines
1.9 KiB
Markdown
98 lines
1.9 KiB
Markdown
# 基本配置
|
||
|
||
在开始使用 `Webpack` 之前，我们需要对 `Webpack` 的配置有一定的认识。
|
||
|
||
## 5 大核心概念
|
||
|
||
1. entry（入口）
|
||
|
||
指示 Webpack 从哪个文件开始打包
|
||
|
||
2. output（输出）
|
||
|
||
指示 Webpack 打包完的文件输出到哪里去，如何命名等
|
||
|
||
3. loader（加载器）
|
||
|
||
webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
|
||
|
||
4. plugins（插件）
|
||
|
||
扩展 Webpack 的功能
|
||
|
||
5. mode（模式）
|
||
|
||
主要由两种模式：
|
||
|
||
- 开发模式：development
|
||
- 生产模式：production
|
||
|
||
## 准备 Webpack 配置文件
|
||
|
||
在项目根目录下新建文件：`webpack.config.js`
|
||
|
||
```js
|
||
module.exports = {
|
||
// 入口
|
||
entry: "",
|
||
// 输出
|
||
output: {},
|
||
// 加载器
|
||
module: {
|
||
rules: [],
|
||
},
|
||
// 插件
|
||
plugins: [],
|
||
// 模式
|
||
mode: "",
|
||
};
|
||
```
|
||
|
||
Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范
|
||
|
||
## 修改配置文件
|
||
|
||
1. 配置文件
|
||
|
||
```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", // 开发模式
|
||
};
|
||
```
|
||
|
||
2. 运行指令
|
||
|
||
```:no-line-numbers
|
||
npx webpack
|
||
```
|
||
|
||
此时功能和之前一样，也不能处理样式资源
|
||
|
||
## 小结
|
||
|
||
Webpack 将来都通过 `webpack.config.js` 文件进行配置，来增强 Webpack 的功能
|
||
|
||
我们后面会以两个模式来分别搭建 Webpack 的配置，先进行开发模式，再完成生产模式
|