webpack5通用配置（webpack5入门到实战1）

一、基本使用1. 概念

Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。我们将 Webpack 输出的文件叫做 bundle。

2. 开始使用

使用es6语法

webpack5通用配置（webpack5入门到实战1）(1)

(1) 资源目录

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

(2) 创建文件

count.js

export default function count(a, b) { return a b; }

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,4)); console.log(sum(1,2,3,4,5));

(3) 下载依赖

初始化package.json

项目根目录：npm init -y

此时会生成一个基础的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

下载依赖

npm i webpack webpack-cli -D

(4) 启用 Webpack

开发模式

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

生产模式

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

参数说明：

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

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

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

(5) 输出文件

默认 Webpack 会将文件打包输出到 dist 目录下

webpack5通用配置（webpack5入门到实战1）(2)

二、基本配置1. 五大核心

entry（入口）

指示 Webpack 从哪个文件开始打包

output（输出）

指示 Webpack 打包完的文件输出到哪里去，如何命名等

loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

plugins（插件）

扩展 Webpack 的功能

mode（模式）

主要由两种模式：开发模式：development；生产模式：production

2. Webpack 配置文件

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

module.exports = { //入口 entry: '', //输出 output: {}, //加载器 module: { rules: [ ] }, //插件 plugins: [ ], //模式 mode:'' };

3. 修改配置文件

配置文件

const path = require('path') module.exports = { //入口：相对路径和绝对路径都行 entry: './src/main.js', //输出 output: { /** * path：文件输出目录，必须是绝对路径 * path.resolve方法返回一个绝对路径 * __dirname当前文件的文件夹绝对路径 */ path: path.resolve(__dirname,'dist'), //文件输出的名字 filename: 'main.js' }, //加载器 module: { rules: [ ] }, //插件 plugins: [ ], //模式 mode:'development', //开发模式 };