1、當前web開發困境
a.文件依賴關係錯綜複雜
b.靜態資源請求效率低
c.模塊化支持不友好
d.瀏覽器對高級js兼容性低
例如：模塊代碼實現隔行換色
1）在新建空白文件夾中運行：npm init -y 會初始化一個package.json文件
2）新建src文件夾，文件夾中建index.html
3) 運行：npm i jquery 安裝jquery
4) 新建index.js文件，以模塊化的方式引用jquery，並設置隔行換色，文件是這樣的：
index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <script src="./index.js"></script> </head> <body> <ul> <li>11111111111</li> <li>22222222222</li> <li>33333333333</li> <li>44444444444</li> <li>55555555555</li> </ul> </body> </html>
index.js文件
import $ from "jQuery" $(function(){ $("li:odd").css("backgroundColor","pink"); $("li:even").css("backgroundColor","lightblue"); })
瀏覽器中運行，報錯
要解決此問題，需要安裝webpack
2、安裝webpack,運行："
3、項目根目錄下新建webpack.config.js文件，內容如下:
module.exports={ mode:'development' }
4、在package.json 配置文件中的scripts節點下，新增dev腳本如下：
5、在終端運行：npm run dev 命令，啓動webpack進行項目打包
再次打開index.html就可看到隔生換色的效果
