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图像上