Webpack工程化笔记(一)：安装Webpack以及进行简单的
2022-01-05 本文已影响0人
听书先生
1、前言
模块打包工具的主要任务就是解决模块间的依赖，让他们打包后能够正常的进行运行，主要处理方式分为两种：
- 将存在依赖关系的模块按照特定规则合并为单个JS文件，一次性全部加载进页面中。
- 在页面初始化加载一个入口模块，其他模块异步地进行加载。
目前主流的模块打包工具有Webpack、Parcel、Rollup等
2、Webpack的优势
- 1、默认支持多种模块标准（AMD、CommonJS等）
- 2、具有完美的代码分割解决方案（也就是说分割打包后，首屏只会加载必要的部分，不重要的会放在后面动态的进行加载）
- 3、Webpack可以处理各种类型的资源文件（样式、模板、甚至图片）
- 4、具有完备的核心库
3、开始安装
Webpack与Nodejs的版本有着密切的关联，node建议使用长期维护的版本(LTS).
全局安装Webpack的话npm会帮我们绑定一个命令行环境变量，实现一次安装、处处运行，但是这种做法在项目团队里是不建议的，因为不同的开发人员的Webpack版本可能不同。
-
本地安装Webpack：
首先执行命令：
npm init或者yarn init
接着会要求填写一些项目的基本信息，不需要的可以直接跳过去，这里会生成一个package.json文件。
图1.png
然后再打开项目终端：
npm install webpack webpack-cli --save-dev
这里同时安装了webpack以及webpack-cli。
webpack是核心模块、webpack-cli是命令行工具
执行命令可查看webpack以及webpack-cli的版本号：
npx webpack -v以及npx webpack-cli -v。
4、打包应用
在该空的项目工程下手动新建几个依赖模块
- getInfo.js：
export default function() {
const info = {
name:'abc',
age: 20,
addr: 'nanjing'
}
document.write(`获取到的用户信息: </br> 姓名: ${info.name}`)
};
- index.js：
import getInfo from './getInfo';
document.write(`测试代码`);
getInfo();
- index.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test unin</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
输入命令进行项目打包：
npx webpack --entry=./index.js --output-filename=bundle.js --mode=development
5、命令详细说明
| 参数 | 作用 |
|---|---|
| entry | 资源打包的入口，Webpack从这开始进行模块查找 |
| output-filename | 打包后输出的文件名，dist文件目录是打包后文件存放的地方，该打包后的产物也会在那里面 |
| mode | 打包模式，有development、production、none三种模式，在development、production模式下，它会自动添加适合当前模式的一系列配置，开发情况下设为development即可。 |
