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

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

使用es6语法

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

• 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));

• 初始化package.json

项目根目录：npm init -y

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

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

• 下载依赖

npm i webpack webpack-cli -D

• 开发模式

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：指定模式（环境）。

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

• entry（入口）

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

• output（输出）

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

• loader（加载器）

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

• plugins（插件）

扩展 Webpack 的功能

• mode（模式）

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

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

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

• 配置文件

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', //开发模式 };

• 运行命令

npx webpack

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

结语：

　你说对生活绝望，完全失去了热情和动力，这种情况说到底，就是你比较懒。

回复webpack，可以获得全套笔记