昨晚看b站視頻的時候就跟着一起配置webpack，由於教學視頻中使用的是3.6.0版本，我用nmp下的是最新的@4.*版本，webpack的官方文檔又看得我頭疼，整了半小時也沒搞明白。
好在今天一早起牀神清氣爽，妥協了繞過4.0，也算是成功配置好了webpack，記錄下這個過程。
- 首先，在windows的cmd窗口下卸載掉之前裝的webpack。
![在這裏插入圖片描述]()
2. 接下來全局安裝webpack3.*版本。
![在這裏插入圖片描述]()
3. 完成上面兩步其實已經解決大部分問題了，在項目目錄下使用 webpack .\src\main.js .\dist\bundle.js就能在dist目錄下自動生成一個bundle.js文件。爲了之後使用方便，在項目根目錄下補充一個名爲webpack.config.js的配置文件。
2. 接下來全局安裝webpack3.*版本。
3. 完成上面兩步其實已經解決大部分問題了，在項目目錄下使用 const path = require('path')
module.exports={
entry:path.join(__dirname,'./src/main.js'),//入口
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
}
}
- 下面是一個隔行變色小案例的實現
![在這裏插入圖片描述]()
index.html代碼
index.html代碼<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- main中的代碼，涉及到了ES6的新語法，瀏覽器不識別 -->
<!-- <script src="./main.js"></script> -->
<!-- 通過webpack這麼一個前端構建工具，把main.js做了一下處理，生成了一個bundle.js的文件 -->
<script src="../dist/bundle.js"></script>
</head>
<body>
<ul>
<li>這是第1個li</li>
<li>這是第2個li</li>
<li>這是第3個li</li>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
<li>這是第7個li</li>
<li>這是第8個li</li>
<li>這是第9個li</li>
<li>這是第10個li</li>
</ul>
</body>
</html>
main.js代碼
//這裏的main.js是我們項目的JS入口文件
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor','lightblue')
$('li:even').css('backgroundColor',function(){
return 'lightgreen'
})
})
注意：改變代碼之後，在根目錄的命令行窗口Powershellwebpack回車一下即可
比如改變了色彩：
以上就是webpack@3.*版本的配置和案例實現過程。