webpack打包前端项目入门
前言：在开发过程中，利用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>
总结
以上是生活随笔为你收集整理的webpack打包前端项目入门的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： html 地球大气,地球大气层为什么永远
- 下一篇： html以图像中心定位,在HTML图像上