一.了解webpack
webpack是一个现代 JavaScript 应用程序的静态模块打包器,能合并代码还能翻译和加密代码
二.目标(在一个已存在的项目中，一个html文件中引入了两个js文件，完成某个功能。现在是的任务是把这两个js打包成一个js文件)
2.1创建一个新的文件夹,并对它进行初始化,用 npm init -y 命令来生成一个package.json
2.2项目结构
项目名
├── index.html
├── index.js
├── tool.js
└── package.json
2.3项目中的代码
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
</div>
<!-- 引入两个js文件 -->
<script src="./tool.js"></script>
<script src="./index.js"></script>
</body>
</html>
tool.js
const updateDom = (id, content) =>{
window.document.getElementById(id).innerHTML = content
}
index.js
updateDom ('app','index.html')
2.4安装webpack(利用npm i webpack webpack-cli -D命令安装webpack)
2.5用模块化的方式来修改代码(就是导出tool.js模块,导入index.js模块)
tool.js
const updateDom = (id, content) =>{
window.document.getElementById(id).innerHTML = content
}
//导出tool.js模块
module.exports = {
updateDom
}
index.js
const { updateDom } = require('./tool')//导入tool.js模块
updateDom ('app','index.html')
2.6开始打包文件
命令:npx webpack ./index.js
如果没错则会显示
2.6将打包完成的main.js文件引入index.html中就行
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
</div>
<!-- 引入打包后的.js文件 -->
<script src="./dist/main.js"></script>
</body>
</html>
