webpack实战入门
1.新建项目
2.项目初始化
npm init
3.安装 webpack webpack-cli
4.项目结构
在项目下添加src文件夹,并在文件src内新建index.js文件;在项目内新建build文件夹。
5.index.js文件
function add(x,y){
return x+y;
}
console.log(add(1000,999))
6.打包index.js文件
开发模式:webpack ./src/index.js -o ./build --mode=development
生产模式:webpack ./src/index.js -o ./build --mode=production
build文件夹下出现main.js
7.运行main.js
9.在nuild文件里新建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>myWebpackTest</title>
<script src="main.js"></script>
</head>
<body>
<h1>welcome webpack</h1>
</body>
</html>
运行index.html
10.新建Json文件
在src文件夹新建person.json文件
{
"name":"XiaoLi",
"age": 18
}
11.重新打包
main.js文件内变化
12.运行index.html文件