本文共 3720 字，大约阅读时间需要 12 分钟。

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

前端工程化：模块化，组件化，规范化，自动化（自动化构建，自动化部署，自动化测试）

代码打包和构建，我们使用webpack ,rollup ,vite

webpack作用

• 代码转换
• 文件优化
• 代码分割
• 模块合并
• 自动刷新
• 自动发布

一、webpack安装

前提条件

请确保安装了 的最新版本

本地安装

//node -v 安装的node版本//npm install xxx -D安装到开发环境//npm  install xxx 安装到生产环境npm install --save-dev webpacknpm install --save-dev webpack@
   
    //如果你使用 webpack 4+ 版本，你还需要安装 CLI。npm install --save-dev webpack-cli//一起安装（安装到生产环境）npm install webpack webpack-cli//安装到开发环境npm install  webpack webpack-cli -D //  -D === --save-dev//npm 可以用 yarn cnpm（需要安装）
   

全局安装

npm install --global webpack

建议本地安装

项目中webpack的基本安装

首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

mkdir webpack-demo && cd webpack-demonpm init -ynpm install webpack webpack-cli --save-dev

webpack 运行

0配置

npx webpack （npx是5.2版本以后npm提供的命令）

//必须根目录下，必须是默认src文件夹下的index.js,默认输出到dist文件下的|-dist	|- main.js|-src	|-a.js	|-index.js|-index.html

• es6中导入和导出是import 和 export
• node 是require 和 module.exports方式导入和导出。
• node_modules下的.bin 下可执行文件webpack命令，命令内部会调用webpack-cli解析用户数据进行打包

pakage.json 中 script 配置命令

"scripts": {       "dev": "webpack --mode development",    "build": "webpack --mode production"  },

dev:开发环境中；build：生产环境中

二、配置webpack

webpack.config.js

webpack配置文件名：webpack.config.js（最好不要更改），遵循commonJS语法规范。

const path = require("path");//commonJS导入模块 path:node 自带的模块module.exports = {   //commonJS导出模块	mode:"develmpent",//开发环境	entry:"./src/index.js",//入口文件	output:{   //输出文件		path:path.resolve(__dirname,"dist"),//文件的绝对路径，到dist目录		//__dirname:当前项目的绝对路径		filename:"bundle.js" //文件名	}}

pakage.json

"scripts": {       "dev": "webpack --mode development",    "build": "webpack --mode production"      },

dev:开发环境中；build：生产环境中

自定义配置文件

1. 开发模式
   webpack.dev.js

//根目录|- webpack.config.js|- webpack.dev.jsconst path = require("path");module.exports = {   	mode:"develmpent",//开发环境	entry:"./src/index.js",//入口文件	output:{   //输出文件		path:path.resolve(__dirname,"dist"),//文件的绝对路径，到dist目录		filename:"bundle1.js" //文件名	}}

package.json

//json文件不允许注释，此处仅为解释说明"scripts": {       "dev": "webpack --config ./webpack.dev", //开发环境 config：配置文件  },

2. 生产模式
   webpack.pro.js

//根目录|- webpack.config.js|- webpack.dev.jsconst path = require("path");module.exports = {   	mode:"production",//开发环境	entry:"./src/index.js",//入口文件	output:{   //输出文件		path:path.resolve(__dirname,"dist"),//文件的绝对路径，到dist目录		filename:"bundle2.js" //文件名	}}

package.json

//json文件不允许注释，此处仅为解释说明"scripts": {         "dev": "webpack --config ./webpack.dev", //开发环境     "build": "webpack  --config ./webpack.pro" //生产环境  },

提取出公共配置

webpack.common.js

const path = require("path");module.exports ={   	mode:"production",	entry:"./src/index.js",	output:{   		path:path.resolve(__dirname,"dist"),		filename:"bundle.js"	}}

webpack.dev.js

const path = require("path");const {   merge} = require('webpack-merge');const common = require('./webpack.common.js');console.log(merge);module.exports = merge(common,{   	mode:"development",	entry:"./src/index.js",	output:{   		path:path.resolve(__dirname,"dist"),		filename:"bundle1.js"	}})

webpack.dev.js

const path = require("path");const {   merge} = require('webpack-merge');const common = require('./webpack.common.js');module.exports=merge(common,{   	mode:"production",	entry:"./src/index.js",	output:{   		path:path.resolve(__dirname,"dist"),		filename:"bundle2.js"	}})

"scripts": {       "dev": "webpack --config webpack.dev.js",    "build": "webpack  --config webpack.pro.js"  },

执行命令行：