1、什么是?
webpack是一个静态模块打包器
2、作用
①有效处理模块化。默认情况下,浏览器并不支持模块化,而我们的前端项目又使用了模块化,有了webpack之后,就可以突破这个限制了。(翻译(降级,es6/7 ----> es5))
②webpack可以把多个相互引用的.js文件打包成一个文件,且文件有加密,压缩的效果,上线更安全。
3、使用
准备工作:
任意新建一个空文件夹,取名为webFile,进入到文件夹内部,用 npm init --yes 命令来生成一个package.json,请看截图展示:


3.1、安装:
webpack是一个工具,对于所有的项目都可以来使用,从这个意义上来讲,它是可以去全局安装的,但是,考虑到不同的项目中可能使用了不同的webpack版本,所以不推荐大家去全局安装。特别是打开一个老项目时,一定要注意一下它的webpack的版本号。
//1、先安装webpack
npm i webpack
//2、再安装webpack-cli
npm i webpack webpack-cli -D
截图展示:

使用 npx webpack -v 检测安装是否成功

注意:
由于webpack并不是全局安装的,所以并不能直接使用
webpack -v来做检验。npx是npm5.2之后提供的新功能。可以通过
npx -v来检测它的版本。 在这里,我们通过它来调用项目安装的模块,它在运行时会在node_modules/.bin中去检查命令是否存在。
3.2、webpack的配置文件
webpack工作流程了解:

1、创建并使用默认配置文件
由于安装webpack后,没有自动帮我们创建webpack配置文件,需要我们手动新建,在项目根目录下创建一个名为 webpack.config.js ,内容如下:
module.exports = {
mode: 'development', // 打包方式
}
截图展示:

这个文件的意义是导出一个配置项:用来对webpack的打包行为做设置。在操作层面,就是清楚如何去使用这个文件。
2、设置入口和出口
入口文件: 指定了webpack从哪个文件开始工作。在它的内部会引入其他的模块,这样在打包时就会「顺藤摸瓜」也将其他的文件打包进来。
出口文件:指定了最后打包之后的文件,重点是这个文件的具体位置。
在webpack中,默认的入口和出口分别是:
- 默认入口是:./src/index.js
- 默认出口是:./dist/main.js。
也就是说,如果直接在根目录下运行webpack,它会直接去找.src下的index.js,并把打包之后的代码放在dist/main.js下。
现在,我在这里有个文件目录结构,如下图:
项目名
├── index.html
├── src
│ └── js
│ ├── main.js
│ └── tool.js
├── webpack.config.js # webpack的配置文件
└── package.json
tool.js文件内容如下:
export let printText = function (id, txt) {
document.querySelector(id).innerHTML = txt;
};
main.js文件内容如下:
import { printText } from "./tool";
printText("#one", "123输出的文本");
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>Document</title>
</head>
<body>
<div id="one"></div>
</body>
</html>
现在,对main.js文件进行打包,
先在配置文件里面添加命令:

打包命令:
基础打包命令:npx webpack 文件名
指定配置文件打包命令: npx webpack --config ./webpack.config.js
在package.json文件里,我们在script标签里可以加一句代码便可以通过npm run dev快速进行打包
代码为:"dev": "webpack --config webpack.config.js",

在这里,由于我们已经配置了入口文件,我们只需要输入npx webpack命令进行打包,见下图:

此时会多出一个dev的文件夹,里面有一个index.js文件,这个文件是将所有的js文件打包为一个js文件,引入index.html即可

本文详细介绍了webpack,一个静态模块打包工具,用于处理前端项目的模块化。它能将多个.js文件打包成一个加密、压缩的安全文件。通过npx webpack命令进行打包,并通过webpack.config.js配置入口和出口。文中还展示了如何创建配置文件、设置入口和出口,以及实际的打包操作。
879

被折叠的 条评论
为什么被折叠?



