溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“如何建立demo配置webpack環境”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何建立demo配置webpack環境”吧！
1、建立一個demo
2、進入建立的webpack_demo目錄下創建一個dist文件夾（用于生產）和src文件夾（用于開發環境）
src文件夾：用來存放我們編寫的javascript代碼，可以簡單的理解為用JavaScript編寫的模塊。
dist文件夾：用來存放供瀏覽器讀取的文件，這個是webpack打包成的文件。
3、編寫程序文件：
dist文件下手動建立一個index.html文件
/dist/index.html
<!DOCTYPEhtml><htmllang="en"><head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>webpack</title></head><body>
<pid="title"></p>
<scriptsrc="./bundle.js"></script></body></html>
解釋：這里引入bundle.js文件，等會用webpack可以生成在src下面建立一個entry.js的入口文件
/src/entry.js下：
document.getElementById(‘title’).innerHTML=HelloWebpack;;
然后就是進行webpack打包：
1、在vscode里面的終端中輸入：webpacksrc/entry.jsdist/bundle.js執行成功后會在dist目錄下生成bundle.js文件，在瀏覽器中顯示HelloWebpack的信息
2、也可能是這樣進行打包webpacksrc/entry.jsoutputdist/bundle.jsmodedevelopment
會在dist目錄下生成bundle.js文件
全局安裝live-server:
npminstall-glive-server
安裝完畢后在終端執行live-server就會在瀏覽器中顯示HelloWebpack的信息
感謝各位的閱讀，以上就是“如何建立demo配置webpack環境”的內容了，經過本文的學習后，相信大家對如何建立demo配置webpack環境這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
