首頁 > 開發者 > 網站開發

Webpack 入門教程1

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：webpack 入門教程1

1.建立項目,項目名app 
mkdir app

650) this.width=650;" src="https://s3.51cto.com/wyfs02/M01/8D/B8/wKiom1inuJeTYmP5AAAD8HMA04k625.png-wh_500x0-wm_3-wmp_4-s_2596626944.png" title="1.png" alt="wKiom1inuJeTYmP5AAAD8HMA04k625.png-wh_50" />

2.進入app的目錄 
cd app

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M02/8D/B6/wKioL1inuNaRZ73WAAACPV4oicY134.png-wh_500x0-wm_3-wmp_4-s_3157556581.png" title="2.png" alt="wKioL1inuNaRZ73WAAACPV4oicY134.png-wh_50" />

3.在項目的根目錄下建立runoob1.js檔案 
echo document.write("It works"); > runoob1.js

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M01/8D/B6/wKioL1inuSOS0nLYAAAE3Ub2EVE540.png-wh_500x0-wm_3-wmp_4-s_3529948353.png" title="3.png" alt="wKioL1inuSOS0nLYAAAE3Ub2EVE540.png-wh_50" />

4.查看該目錄下產生的檔案 
dir

650) this.width=650;" src="https://s5.51cto.com/wyfs02/M00/8D/B8/wKiom1inuZXzBAAFAAAaGsTchnA084.png-wh_500x0-wm_3-wmp_4-s_366983062.png" title="4.png" alt="wKiom1inuZXzBAAFAAAaGsTchnA084.png-wh_50" />

5.查看runoob1.js檔案中的內容 
type runoob1.js

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M00/8D/B6/wKioL1inud3indqlAAAGEWZzwME628.png-wh_500x0-wm_3-wmp_4-s_905216974.png" title="5.png" alt="wKioL1inud3indqlAAAGEWZzwME628.png-wh_50" />

6.在項目的根目錄下建立index.html檔案 
echo ... > index.html

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M02/8D/B6/wKioL1inuiugANRsAAAENojs9Jk675.png-wh_500x0-wm_3-wmp_4-s_3003111420.png" title="6.png" alt="wKioL1inuiugANRsAAAENojs9Jk675.png-wh_50" />

7.修改index.html檔案的內容,內容如下 
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""></head><body><script type="text/javascript" src="bundle.js" charset="utf-8"></script></body></html>
8.查看已修改後的index.html檔案的內容 
type index.html

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M02/8D/B8/wKiom1inupuhlohRAAAbsOE2KC8088.png-wh_500x0-wm_3-wmp_4-s_1172832643.png" title="8.png" alt="wKiom1inupuhlohRAAAbsOE2KC8088.png-wh_50" />

9.安裝webpack 
cnpm install webpack

650) this.width=650;" src="https://s5.51cto.com/wyfs02/M02/8D/B6/wKioL1inuv3DjN-aAAAmKslMA_M239.png-wh_500x0-wm_3-wmp_4-s_463453102.png" title="9.png" alt="wKioL1inuv3DjN-aAAAmKslMA_M239.png-wh_50" />

10.打包runoob1.js檔案為bundle.js 
webpack runoob1.js bundle.js

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M00/8D/B8/wKiom1inu03j9Z-4AAAQKHRCvAc169.png-wh_500x0-wm_3-wmp_4-s_595690845.png" title="10.png" alt="wKiom1inu03j9Z-4AAAQKHRCvAc169.png-wh_50" />

11.在瀏覽器中開啟index.html檔案,輸出內容如下

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M00/8D/B6/wKioL1inu6GylItYAAARr16jl6Q260.png-wh_500x0-wm_3-wmp_4-s_3573662853.png" title="11.png" alt="wKioL1inu6GylItYAAARr16jl6Q260.png-wh_50" />

本文出自 “素顏” 部落格，請務必保留此出處http://suyanzhu.blog.51cto.com/8050189/1899006

Webpack 入門教程1

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More