【webpack】wabpack5 知识梳理

1、简单介绍

默认功能

可处理 js、json文件，处理 js 文件引入将其打包；
将es6的import规范编译为浏览器可识别的commonjs规范；
生产环境比开发环境打包多了代码丑化、压缩；

五大核心

入口(entry)：指定打包入口；
出口(output)：指定打包输出文件目录、文件名；
转换器(loader)：用于对模块的源代码进行转换，如处理样式、图片等静态资源；
插件(plugins)：用于执行范围更广的任务，如打包优化，资源管理，注入环境变量；
模式(mode)：默认值为 production，启用 webpack 内置在相应环境下的优化；

2、安装

“webpack”: “^5.89.0”
“webpack-cli”: “^5.1.4”

npm i webpack webpack-cli -D

3、配置介绍

可使用webpack默认配置，也可以通过创建webpack.config.js配置；

执行方式一：简单更改webpack配置

npm script脚本

"scripts": {"dev": "webpack ./src/main.js --mode=development","build": "webpack ./src/main.js --mode=production",
},

直接命令行

npx webpack ./src/main.js --mode=development
npx webpack ./src/main.js --mode=production
# 创建配置文件
npx webpack init

执行方式二：创建`webpack.config.js`添加自定义配置

// webpack5 基本配置
module.exports = {// 入口entry: './src/main.js',// 输出output: {path: __dirname + '/dist',filename: 'bundle.js',},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: 'development',
}