WebPack简单使用
WebPack是Node管理的一个包,Node类似于Linux的Yum rpm包,安装后提供npm命令(类似于yum命令),通过npm install(yum install)可以安装各种软件。
WebPack可以用来为前台代码模块化打包,打包成浏览器可以识别的代码,比如js/less/css/jpg等都可以作为一个模块整合起来。
安装
(1)安装node,关注node的版本v12.18.3,node的安装路径
nodejs的安装目录中找到node_modules\npm.npmrc
prefix=D:\software\JAVA\nodejs\node_modules\node_global
cache=D:\software\JAVA\nodejs\node_modules\node_cache
registry=https://registry.npm.taobao.org
(2)安装webPack
虽然说最好不要全局安装,但是全局安装步骤要简单好多,webPack.js会调用webpack-cli的路径,如果不全局安装需要单独配置后才能使用。
npm install webpack-cli -g
npm install webpack-cli -g
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dgFQ6RZP-1619628788944)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210429002515345.png)]
基本使用
a.案例准备
(1)提供commonJs的模块
function add(num1, num2) {
return num1 + num2;
}
function mul(num1, num2) {
return num1 * num2;
}
module.exports = {
add, mul,
}
(2)在main.js中使用
const {add, mul} = require("./utils/mathUtil.js")
console.log(add(10, 30));
(3)index.html仅引入main.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
此时刷新后,控制台报错
b.打包操作
webpack ./src/main.js -o ./dist/bundle.js
index.html中引用打包后的js文件,此时刷新控制台,可以输出
<script src="../dist/bundle.js/main.js"></script>