简介
Webpack是一个开源的JavaScript模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件（有时会多个）。这个过程就叫作模块打包。
可以把Webpack理解为一个模块处理工厂。开发者把源代码交给Webpack，由它去进行加工、拼装处理，产出最终的资源文件，等待送往用户。
目前社区流行的的模块打包工具除了Webpack外，还有Vite、parcel、Rollup等，那么相比较，Webpack有什么优势？
- Webpack默认支持多种打包模块标准，包括AMD、CommonJS以及最新的ES6模块，而其他工具大多支持一到两种。Webpack对于一些同时使用多种模块标准的工程非常有用，它会处理好不同类型模块之间的依赖关系。
- Webpack有完备的代码分片解决方案。从字面意思去理解，它可以分割打包后的资源，在首屏只加载必要的部分，将不太重要的功能放到后面动态加载。
- Webpack可以处理各种类型的资源。除了JavaScript以外，Webpack还可以处理样式、模板，甚至图片等，而开发者需要做的仅仅是导入它们。
- Webpack拥有庞大的社区支持。
安装
Webpack对于操作系统没有要求，使用Windows、Mac、Linux操作系统均可。它唯一的依赖就是Node.js。
Webpack对Node.js的版本有一定的要求，推荐使用Node.js的LTS（Long Term Support，长期维护）版本。
安装Webpack的方式有两种，一种是全局安装，一种是本地安装。
全局安装Webpack的好处是npm会绑定一个命令行环境变量，一次安装、处处运行；本地安装Webpack会添加其为项目中的依赖，只能在项目中内部使用。
推荐使用本地安装，推荐理由
- 如果选择全局安装，那么在与他人进行项目协作的时候，由于每个人系统中的Webpack版本不同，可能会导致输出结果不一致；
- 部分依赖于Webpack的插件会调用项目中Webpack的内部模块，这种情况下仍然需要在项目本地安装Webpack，而如果全局和本地都有，则容易造成混淆；
首先新建一个工程目录，从命令行进入该目录，并运行npm初始化命令
npm init此时会要求你输入项目的基本信息，根据提示操作就好。然后，会在目录中生成一个package.json文件，它相当于npm项目的说明书，里面记录了项目名称、版本、仓库地址等信息。
接下来执行安装Webpack的命令
npm install webpack webpack-cli -D安装结束后，在命令行执行npx webpack -v以及npx webpack-cli -v，可显示版本号即证明安装成功。
注意事项
由于Webpack安装在了本地（项目工程中），因此无法直接在命令行内使用webpack指令。工程内部只能使用npx webpack <command>的形式。
打包第一个应用
在工程目录下添加以下几个文件：
// index.js
import addContent from "./addContent.js";
document.write("My first Webpack app.<br>");
addConent();
// addContent.js
export default function () {
document.write("Hello World!");
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first Webpack app</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
然后在命令行输入打包命令：
npx webpack --entry=./index.js --mode=development用浏览器打开index.html，这时应该可以看到页面上会显示“My first Webpack app.Hello world!”。
总结
Webpack帮开发者完成了一项最基本的模块组装工作，现在回顾一下刚刚的打包命令。
命令行的第一个参数entry是资源的打包入口。Webpack从这里开始进行模块依赖的查找，找到index.js和addContent.js这两个模块，并通过它们来生成最终产物。
命令行的第二个参数mode指的是打包模式。Webpack为开发者提供了development、production、none三种模式。当置于development和production模式下时，它会自动添加适合当前模式的一系列配置，减少了人为的工作量。
原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/front-end/webpack-first-app.html
微信扫一扫 
支付宝扫一扫 
