webpack打包前端项目入门
程序员文章站
2022-05-30 16:39:39
...
前言：在开发过程中，利用webpack可以帮我们自动把ES6语法编译成低版本浏览器能解析的JavaScript代码。下面给出webpack打包前端项目入门案例。
[终端：进入项目所在目录]
1.初始化项目依赖：
npm init -y
2.安装webpack-cli脚手架
npm install webpack webpack-cli --save-dev
3.配置打包运行命令[package.json文件中]
"dev": "webpack --mode development --watch"
4.运行：npm run dev
-----------------------------------------------------------
e.g.最精简的项目结构目录
ProjectName
dist
node_moudles
src
index.js
package.json
package-lock.json
index.html
终端运行：npm run dev
操作：修改src中的源码，webpack会在保存文件时自动实时编译，部分IDE还能实时刷新页面
注意：
1.dist是存放编译后文件的目录，webpack打包时会自动创建该文件夹；
2.index.html是项目默认的访问页面，里面引入的是dist中即编译后的资源文件。
3.src是项目的源代码目录，webpack打包时里面不能为空，否则报错。
如在src中建一个index.js文件，文件内容可以为空，方便测试不妨在index.js文件中写入这行代码修改body的背景色：document.body.style.backgroundColor = "pink";
<!DOCTYPE html>
<html>
<head>
<title>测试webpack打包项目</title>
</head>
<body>
<h3>测试webpack打包项目</h3>
<script type="text/javascript" src="./dist/main.js"></script>
</body>
</html>