webpack安装，打包文件方法
一、为什么要使用webpack
因为要解决一些项目痛点：
- 第三方插件管理杂乱不堪, 每次使用都需要重新导入
- CSS3新增属性未添加私有前缀、ES678语法未进行适配,网页兼容性低下
- 未对项目文件进行优化, 网页性能低下
引入过多第三方资源请求次数增加, 本地js/css代码压缩,本地图片压缩等 - 未强制要求代码规范, 部分代码可能不符合企业要求
二、什么是webpack?
- webpack是一套基于NodeJS的"模块打包工具",
- 在webpack刚推出的时候就是一个单纯的JS模块打包工具,可以将多个模块的JS文件合并打包到一个文件中（只管理js）
- 但是随着时间的推移、众多开发者的追捧和众多开发者的贡献
现在webpack不仅仅能够打包JS模块, 还可以打包CSS/LESS/SCSS/图片等其它文件
三、为什么要分模块?
- 如果将所有的JS代码都写到一个文件中, 十分不利于代码的维护和复用
- 所以我们可以将不同的功能写到不同的模块中, 这样就提升了代码的维护性和复用性
- 但是当将代码写到不同模块时新的问题又出现了,
例如: 导入资源变多了, 请求次数变多了, 网页性能也就差了
例如: 不同功能都放到了不同模块中了, 那么如何维护模块之间的关系也变成一个难题了（模块之间的依赖关系，导入的先后顺序）
例如:
<script src="./header.js"></script>
<script src="./content.js"></script>
<script src="./index.js"></script>
<script src="./footer.js"></script> // 如果index.js中用到了footer,就会报错
四、如何解决上述问题——使用webpack
- 项目上线时将用到的所有模块都合并到一个文件中,并且模块代码放前面，使用代码放后面。
- 在index.html中只导入主文件, 在主文件中再导入依赖模块
五、如何通过webpack来打包JS模块
1. 安装webpack
- 安装NodeJS
- 在https://www.webpackjs.com/guides/installation/网站中，打开官方文档中中文文档——指南——安装
![中文文档]()
- 使用Npdejs安装webpack共两种方式：本地安装和全局安装（不推荐）。
- 使用本地安装步骤：
- 文件夹（F:\学习\front-end\15.Webpack\01、webpack-打包JS文件> ）中初始化package.json文件：
npm init -y
- 要安装最新版本或特定版本，请运行以下命令之一：
npm install --save-dev webpack
npm install --save-dev webpack- 如果你使用 webpack 4+ 版本，你还需要安装 CLI。
npm install --save-dev webpack-cli
2. 编写模块化代码
案例：
header.js
function addHeader() {
let oDiv = document.createElement("div");
oDiv.innerText = "头部";
document.body.appendChild(oDiv);
}
exports.addHeader = addHeader;
content.js
function addContent() {
let oDiv = document.createElement("div");
oDiv.innerText = "内容";
document.body.appendChild(oDiv);
}
exports.addContent = addContent;
footer.js
function addFooter() {
let oDiv = document.createElement("div");
oDiv.innerText = "底部";
document.body.appendChild(oDiv);
}
exports.addFooter = addFooter;
index.js
/*一下都是NodeJS语法，使用浏览器打开html文件会报错，使用webpack打包后，将打包文件引入html不会报错* */
const hModule = require("./header.js");
const cModule = require("./content.js");
const fModule = require("./footer.js");
hModule.addHeader();
cModule.addContent();
fModule.addFooter();
使用webpack打包后，直接在html文件中引入打包后的文件即可在浏览器中正确打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01、webpack-打包JS文件</title>
/*直接引用NodeJS语法的文件，html会报错
<script src="./header.js"></script>
<script src="./content.js"></script>
<script src="./footer.js"></script>
<script src="./index.js"></script>
*/
<script src="dist/main.js"></script>/*可以正确打开*/
</head>
<body>
</body>
</html>
3. 在终端中输入打包的指令：npx webpack index.js
- 注意点:
index.js就是需要打包的文件，会将所有index.js依赖的文件打包至一个文件中。
打包之后的文件会放到dist目录中, 名称叫做main.js
此步骤可以用配置webpack文件的方式，而不是用终端输入命令的方式，详见：webpack配置文件写法
4.在html文件中引入打包之后的文件main.js即可
