webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。webpack 是代码编译工具，有入口、出口、loader 和插件。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
webpack是一个nodejs的程序，所以使用时需要安装nodejs。webpack打包完成的app程序是无需node运行环境的（除非就是node相关的项目），可以直接放到服务器运行。
TIP：如果只是单页面使用vue，或者很少部分使用vue，无需打包，直接在界面实现即可，如果是整体vue项目，需要使用webpack最后打包成项目文件。
下载地址：http://nodejs.cn/download/
安装完成之后，打开命令行，输入 node -v 查看是否安装成功
命令行输入
孤狼 | 
2022-07-30 01:48:15 | 
1071°C | 
0条评论 ]npm install --save webpack //最新版(生产环境)
npm install --save webpack@ //指定版本(生产环境)
npm install --save-dev webpack //最新版(开发环境)
npm install --save-dev webpack@ //指定版本(开发环境)
npm install webpack-cli //命令行调用,不装找不到命令 注意：安装目录为当前命令行所在目录，并非nodejs目录。安装完成之后，会在当前目录（命令行所在目录）下创建node_modules文件夹保存文件。
不推荐全局安装，避免版本冲突。
webpack可以自动打包代码到指定的目录，一般项目中，代码文件放在src文件夹中，最后输出的文件放在dist文件夹中。使用
npx webpack --entry 主入口js --output-path 输出目录命令来打包程序，webpack会自动处理js之间的引用关系，汇总合并输出。同时webpack也可以处理其他引用语句，处理es6之外的其他应用方式也会被自动处理。
新建一个项目文件夹 app ，并创建 src 和 dist 两个文件夹，在 app 文件夹下创建 index.html 文件，并在app文件夹下打开命令窗口，输入 npm install --save-dev webpack 在app文件夹下安装webpack。在 src 目录下新建2个js文件， main.js 和 func.js ，其中 main.js 作为主入口文件。
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>main.js文件
import * as a from "./func"
//webpack会自动识别并补全func.js
console.log(a.add(1,5));
a._aaa();func.js文件
export function add(n1,n2){
return n1+n2;
}
export function _aaa(){
console.log('成功运行');
}写完代码之后,在命令框运行
npx webpack --entry ./src/main.js --output-path ./dist这样就会把以 /src/main.js 为主入口的所有引用到的文件都打包到 /dist/main.js 。在index.html中引用/dist/main.js即可运行
下载地址：
密码：g9r1
赞赏一个鸡腿
