本节知识点
- 简易DEMO
(一) 建立项目的基本结构
(i) 第一步建立两个目录 src和dist
src: 就是我们敲代码的地方，没有编译前
dist: 就是我们编译后的地方。webpack打包后的文件存放的地方-
(1) 首先在项目的根目录新建一个index.html并写下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Hello WebPack</title>
</head>
<body>
<div id="title"></div>
<script src="./dist/a.js"></script>
</body>
</html>
因为dist下面没有a.js所以现在还不能看
(2) 在src下面的目录下面见一个文件叫做enter.js然后在里面写入
document.querySelector("#title").innerHTML = "Hello Webpack";
(3)执行打包工作
语法结构就是: 第一个花括号就是要打包的文件 第二个花括号就是要输出供浏览器看的路径
webpack {entry filr} {build file}
放在本例子就是
webpack src/enter.js dist/a.js
执行的结果如下图
b.jpg
