溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹怎么建立demo配置webpack環境，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
1、建立一個demo
2、進入建立的webpack_demo目錄下創建一個dist文件夾（用于生產）和src文件夾（用于開發環境）
src文件夾：用來存放我們編寫的javascript代碼，可以簡單的理解為用JavaScript編寫的模塊。
dist文件夾：用來存放供瀏覽器讀取的文件，這個是webpack打包成的文件。
3、編寫程序文件：
dist文件下手動建立一個index.html文件
/dist/index.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title></head><body>
<p id="title"></p>
<script src="./bundle.js"></script></body></html>/src/entry.js下：
document.getElementById(‘title’).innerHTML=’Hello Webpack’;
然后就是進行webpack打包：
1、在vs code里面的終端中輸入 ： webpack src/entry.js dist/bundle.js 執行成功后會在dist目錄下生成bundle.js文件，在瀏覽器中顯示Hello Webpack 的信息
2、也可能是這樣進行打包webpack src/entry.js –output dist/bundle.js –mode development
全局安裝live-server:
npm install -g live-server
安裝完畢后在終端執行 live-server 就會在瀏覽器中顯示Hello Webpack的信息
以上是“怎么建立demo配置webpack環境”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
