使用webpack打包js文件(隔行變色案例)
1.webpack安裝的兩種方式
- 運行
npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令 - 在項目根目錄中運行
npm i webpack --save-dev安裝到項目依賴中
2.初步使用webpack打包構建列表隔行變色案例
項目結構:
image
- 運行
npm init -y初始化項目，使用npm管理項目中的依賴包 - 創建項目基本的目錄結構
- 使用
npm i jquery -s安裝jquery類庫 - 創建
main.js並書寫隔行變色的代碼邏輯：
// 導入jquery類庫
import $ from 'jquery'
$(function () {
// 設置奇數行背景色
$('li:odd').css('background-color','lightblue')
// 設置偶數行背景色，索引從0開始，0是偶數
$('li:even').css('background-color',function () {
return '#'+'F15A24'
})
})- 直接在頁面上引用
main.js會報錯，因爲瀏覽器不認識import這種高級的JS語法，需要使用webpack進行處理，webpack默認會把這種高級的語法轉換爲低級的瀏覽器能識別的語法； - 運行
webpack 入口文件路徑 輸出文件路徑對main.js進行處理：
webpack src/js/main.js -o dist/bundle.js
注意如果提示沒有webpack-cli,安裝:
npm install webpack-cli -g
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
</style>
<!--注意不推薦在這裏引入任何包和css文件-->
<!--由於es6語法瀏覽器不識別 會報錯-->
<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>3.使用webpack的配置文件簡化打包時候的命令
項目結構:
image
- 在項目根目錄中創建
webpack.config.js - 由於運行webpack命令的時候，webpack需要指定入口文件和輸出文件的路徑，所以，我們需要在
webpack.config.js中配置這兩個路徑： - 命令:
webpack
// 導入處理路徑的模塊
var path = require('path');
// 導出一個配置對象，將來webpack在啓動的時候，會默認來查找webpack.config.js，並讀取這個文件中導出的配置對象，來進行打包處理
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
output: { // 配置輸出選項
path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
filename: 'bundle.js' // 配置輸出的文件名
}
}4.實現webpack的實時打包構建
- 由於每次重新修改代碼之後，都需要手動運行webpack打包的命令，比較麻煩，所以使用
webpack-dev-server來實現代碼實時打包編譯，當修改代碼之後，會自動進行打包構建。 - 運行
cnpm i webpack-dev-server --save-dev安裝到開發依賴或者npm i wepack-dev-server -D - 安裝完成之後，在命令行直接運行
webpack-dev-server來進行打包，發現報錯，此時需要藉助於package.json文件中的指令，來進行運行webpack-dev-server命令，在scripts節點下新增"dev": "webpack-dev-server"指令，發現可以進行實時打包，但是dist目錄下並沒有生成bundle.js文件，這是因爲webpack-dev-server將打包好的文件放在了內存中
- 把
bundle.js放在內存中的好處是：由於需要實時打包編譯，所以放在內存中速度會非常快 - 這個時候訪問webpack-dev-server啓動的
http://localhost:8080/網站，發現是一個文件夾的面板，需要點擊到src目錄下，才能打開我們的index首頁，此時引用不到bundle.js文件，需要修改index.html中script的src屬性爲:<script src="../bundle.js"></script> - 爲了能在訪問
http://localhost:8080/的時候直接訪問到index首頁，可以使用--contentBase src指令來修改dev指令，指定啓動的根目錄：
"dev": "webpack-dev-server --contentBase src"
同時修改index頁面中script的src屬性爲<script src="bundle.js"></script>
這時的index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
</style>
<!--注意不推薦在這裏引入任何包和css文件-->
<!--由於es6語法瀏覽器不識別 會報錯-->
<!--<script src="../dist/bundle.js"></script>-->
<!-- /bundle.js放在了內存中,實際看不到 是在根目錄下-->
<script src="/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>常用命令:
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" --open表示自動打開 --port 3000 端口3000 --contentBase src根路徑 --hot 熱啓動 不需要手動刷新頁面 自動重載
package.json:
{
"name": "WEBPACK-STUDY",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1",
"webpack": "^4.25.1"
},
"devDependencies": {
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}