webpack安裝教程
webpack4.0後的安裝教程
1.在安裝webpack前，你必須爲本機安裝 node.js
1.1下載安裝好後
1.2打開命令行執行命令
node -v // 查看node的版本
npm -v //查看npm的版本
都正常顯示版本號，那就安轉成功了可以進行webpack的安裝了。
2.打開命令行（win+R 輸入cmd）
webpack的安裝，webpack的安裝有全局安裝與 僅該項目安裝，官方不建議全局安裝，網上的教程基本是全局安裝，即使你全局安裝了，你依舊需要再次爲項目安裝。全局安裝可能會造成項目中的指向的是全局安裝的webpack;
由於webpack4後的版本，命令遷移至webpack-cli，因此還需安裝webpack-cli
2.1在命令提示行執行命令:
npm install webpack webpack-cli -g --save-dev -g
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-fj9dVENy-1573467919779)(F:\CSDN發佈記錄\圖片2\013.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191111182546238.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzNjQzNg==,size_16,color_FFFFFF,t_70)
2.2安裝完成後輸入webpack -v 如果出現版本號就說明安裝成功 ,跳轉至教程第3步;
如果出現 'webpack -v' 不是內部或外部命令，也不是可運行的程序或批處理文件。
說明需要配置環境變量;步驟:我的電腦—>右擊—>屬性—>高級系統設置—>高級—>環境變量—>在系統變量裏面尋找path—>雙擊打開—>點擊新建(圖像2.2.1)—>輸入安裝位置,截止到npm這一層目錄(具體見圖像2.2.2)—>確定,保存—>重新打開命令提示行,—>輸入webpack -v —>返回教程2.2;
圖像2.2.1
圖像2.2.2
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TIxYGz2p-1573467919784)(F:\CSDN發佈記錄\圖片2\014.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191111182625493.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzNjQzNg==,size_16,color_FFFFFF,t_70)
3爲項目安裝，找到你該項目的根路徑位置,打開命令提示行(cmd)
3.1輸入命令 npm install webpack webpack-cli --save-dev
安裝後你會發現你項目下多了node_moudle文件 package_lock.json文件；說明你成功安裝好了
3.2再在命令行初始化項目執行命令 npm init 一直回車,出現下圖最後一行,在回車
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-pBTYvw0L-1573467919785)(F:\CSDN發佈記錄\圖片2\016.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191111182645710.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzNjQzNg==,size_16,color_FFFFFF,t_70)
到這裏你回到項目例看會看到 package.json文件 一切沒問題
這裏webpakc的入口默認爲 src 下的index.js，出口默認爲 ./dist
3.3創建與下圖對應的目錄(注意文件夾路徑)
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-W9WjHRRy-1573467919787)(F:\CSDN發佈記錄\圖片2\017.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191111182655217.png)
4測試webpack
4.1在項目根路徑下打開cmd輸入npm ijquery安裝jquery,方便測試;
4.2在index.html裏面輸入以下內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>
4.3在index.js裏面輸入一下內容
import $ from 'jquery'
$(function(){
$('li:odd').css('color','red')
})
4.4打開當前項目根目錄下的命令提示行(cmd)輸入webpack ./src/index.js -o ./dist/bundle.js 等待…
4.5出現類似下圖,表示成功;
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-OstPpqDq-1573467919788)(F:\CSDN發佈記錄\圖片2\018.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191111182707719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzNjQzNg==,size_16,color_FFFFFF,t_70)
4.6打開index.html替換爲以下代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <script src="main.js" type="text/javascript" charset="utf-8"></script> -->
<script src="../dist/bundle.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>
4.6運行index.html出現下圖,教程結束:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Ej7kXds3-1573467919789)(F:\CSDN發佈記錄\圖片2\019.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191111182728646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzNjQzNg==,size_16,color_FFFFFF,t_70)