【webpack外掛使用】在開發中快速掌握並使用Webpack構建web應用程式
阿新 • • 發佈：2018-11-09
1.webpack-dev-server外掛的基本使用
入門程式
const path = require('path');
// 匯出一個Webpack的配置物件（通過node中的模組操作，向外暴露了一個配置物件）
module.exports = {
// 需要在這裡手動指定入口 和 出口
entry : path.join(__dirname, './src/main.js'), // 入口：表示要使用webpack打包那一個檔案
output : {
// 輸出檔案的相關配置
path : path.join(__dirname, './dist'), //
main.js
// 這是專案中JS的入口檔案 // 1. 匯入jquery(從node_models 中引入JQuery這個包， 這是ES6中的一個匯入模組的方式) // 直接使用的話，瀏覽器會不支援這個，會報錯！！！ import $ from 'jquery'; // 類似於jQuery的也是不支援的 // const $ = require('jquery'); $(function () { // 設定隔行變色的效果 $('li:odd').css('backgroundColor', 'black'); $('li:even').css('backgroundColor', function () { return '#' + '097634'; }); });
// ===========================================================
// 知識點總結：
// 基於Webpack的專案的優點？？？
// 1. 可以處理JS檔案中的 相互依賴關係
// 2. webpack能夠處理js的相容問題（包括ES6的一些新的特性， 可以把一些高階的瀏覽器的語法轉換為一些低階的，瀏覽器可以正常識別的語法）
// 3. webpack 要打包的檔案路徑 輸出檔案的路徑資訊
// ===========================================================
// ===========================================================
// 1. 使用webpack-dev-server （類似於nodemon 這個工具） 這個工具可以實現自動打包編譯的功能
// 2. 這個工具的用法和webpack的用法， 完全一樣
// 3. 由於是在專案中安裝的webpack-dev-server, 因此無法把這個當做一個指令碼命令在cmd等終端命令中來使用（需要使用bpm install --save -g）
// 4. 執行成功之後，預設是可以直接通過地址:http://localhost:8080/ 這個URl地址來訪問了
// 5. 注意webpack-dev-server 幫我們打包生成的bundle.js 檔案， 並沒有存放在實際的物理磁碟中，而是直接託管到了電腦的記憶體中了，因此在我們專案的根目錄下面，根本找不到這一二個打包好的bundle.js檔案
// 6. 這個工具實際上是以一種虛擬的方式，把程式碼託管到哦咱們的專案的根目錄中了，雖然看不到，但是可以認為他存在約dist src node_models 同級別下面，名稱文bundle.js 檔案
// 7. 這樣做的好處：：一個字---塊！！！（如果放在磁碟中，也會消耗磁碟讀寫速度！！！）
// ===========================================================
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack的使用</title>
<!--不推薦在這裡引入任何js和CSS檔案, main.js中的一些新的語法， 但是瀏覽器不支援， 可以通過webpack這個前端構建工具，
解決方案： 可以通過引入webpack生成的bundle.js檔案來實現ES6的一些新的語法（瀏覽器相容）
-->
<!--<script src="main.js"></script>-->
<!--
1. 注意事項: 由於頁面中引入的 bundle.js 檔案實際上不是這一個bunlde.js 檔案（是處於根目錄下面的一個虛擬地址下面的bundle.js 檔案，
如果這裡直接引入自己定義生成的../dist/bundle.js 檔案，後面也是無法正常訪問到這一個檔案的 ）
2. 為了實現頁面的實時程式碼更新後的實時重新整理功能，需要在這裡依然怒根路徑下面的那一個 bundle.js 檔案（關鍵）
-->
<!--<script src="../dist/bundle.js"></script>-->
<script src="/bundle.js"></script>
</head>
<body>
<!--這個是歡迎頁面-->
<ul>
<li>這是第0個li</li>
<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>
</ul>
</body>
</html>
package.json
{ "name": "VUEJS", "version": "1.0.0", "description": "", "main": "index.js", "directories": { "lib": "lib" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "jquery": "^3.3.1", "webpack": "^4.20.2", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.9" }, "devDependencclsies": { "webpack-dev-server": "^3.1.9" } }
1.1 第一種配置配置方法
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --port 80 --contentBase src --hot" },
通過以上命令可以配置埠，根路徑資訊，熱載入資訊
1.2 第二種配置方法
const path = require('path');
// 2. 啟用熱更新的第二步
const webpack = require('webpack');
// 匯出一個Webpack的配置物件（通過node中的模組操作，向外暴露了一個配置物件）
module.exports = {
// 需要在這裡手動指定入口 和 出口
entry : path.join(__dirname, './src/main.js'), // 入口：表示要使用webpack打包那一個檔案
output : {
// 輸出檔案的相關配置
path : path.join(__dirname, './dist'), // 出口：表示打包好的檔案，要輸出到哪一個目錄中去
filename : 'bundle.js' // 指定輸出的檔名稱
},
devServer : {
// 配置一個物件資訊（ dev-server的第二種方式）
// --open --port 80 --contentBase src --hot
open : true, // 設定一下自動開啟瀏覽器
port : 80, // 配置一下埠資訊
contentBase : 'src', // 指定根目錄資訊
hot : true, // 1. 啟用熱更新的第一步
},
plugins : [
// 3. 配置熱更新的第三步, 建立一個熱更新的模組物件
new webpack.HotModuleReplacementPlugin()
]
}
2.html-webpack-plugin外掛的基本作用
const path = require('path');
// 2. 啟用熱更新的第二步
const webpack = require('webpack');
// 匯入可以在記憶體中生辰HTML頁面的外掛
// 【外掛的主要作用】：
// 1. 自動在記憶體中根據指定的頁面生成一個在記憶體中的頁面
// 2. 會自動將打包好的bundle.js 這個檔案追加在頁面上去
const htmlWebpackPlugin = require('html-webpack-plugin');
// 匯出一個Webpack的配置物件（通過node中的模組操作，向外暴露了一個配置物件）
module.exports = {
// 需要在這裡手動指定入口 和 出口
entry : path.join(__dirname, './src/main.js'), // 入口：表示要使用webpack打包那一個檔案
output : {
// 輸出檔案的相關配置
path : path.join(__dirname, './dist'), // 出口：表示打包好的檔案，要輸出到哪一個目錄中去
filename : 'bundle.js' // 指定輸出的檔名稱
},
devServer : {
// 配置一個物件資訊（ dev-server的第二種方式）
// --open --port 80 --contentBase src --hot
open : true, // 設定一下自動開啟瀏覽器
port : 80, // 配置一下埠資訊
contentBase : 'src', // 指定根目錄資訊
hot : true, // 1. 啟用熱更新的第一步
},
plugins : [
// 3. 配置熱更新的第三步, 建立一個熱更新的模組物件
new webpack.HotModuleReplacementPlugin(),
// 【注意事項】 當我們使用了這個html-webpack-plugin 之後， 我們就不需要手動處理bundle.js 的引用路徑資訊了，因為這個外掛已經幫我們自動建立了一個合適的script標籤，並且引入了正確的路徑資訊（記憶體中的 bundle.js）
new htmlWebpackPlugin({
// 建立一個在記憶體中生成html的外掛
template : path.join(__dirname, './src/index.html'), // 指定一個模板頁面，將來會檔案指定的頁面路徑，去生成記憶體中的頁面
filename : 'index.html' // 新生成的html檔案的名稱
})
]
}
3. 使用loader配置處理CSS樣式表的第三方外掛
第一步：安裝 css-loader, style-loader
第二步：使用ES6的語法引入樣式檔案
// 2. 使用import語法匯入CSS的樣式表（ 非js模組） // webpack 預設只能打包處理JS型別的檔案，無法處理其他的非JS型別的檔案 // 如果需要處理非js的檔案，需要安裝一些合適的第三方載入器 // 2.1 CSS檔案的載入器： 安裝 style-loader css-loader // 2.2 在webpack.config.js這個配置檔案上面，新增一個配置節點，叫做module, 新增一個rules屬性， 這個陣列中存放了一些匹配和一些處理規則 import './css/index.css' 第三步：配置webpack.config.js module : { // 這個節點用於配置所有的第三方模組載入器 rules : [ // 在這裡配置所有第三方的匹配規則,（匹配所有以.css結尾的檔案） { test : /\.css$/, use : ['style-loader', 'css-loader'] // 對所有的CSS格式的檔案實現一個CSS樣式處理（使用載入器進行處理css樣式的檔案） } ] }
4. 使用loader配置處理less檔案的第三方外掛
第一步：安裝less， less-loader
第二步：使用ES6匯入less檔案
module : { // 這個節點用於配置所有的第三方模組載入器 rules : [ // 在這裡配置所有第三方的匹配規則,（匹配所有以.css結尾的檔案） { test : /\.css$/, // 注意這些CSSloader的呼叫方式是從右到左的順序來呼叫的 use : ['style-loader', 'css-loader'] // 對所有的CSS格式的檔案實現一個CSS樣式處理（使用載入器進行處理css樣式的檔案） }, { // less 也是一種未編譯的CSS test : /\.less$/, // 先編譯成css檔案，然後執行上面的cdd步驟 use : ['style-loader', 'css-loader', 'less-loader'] } ] }
5.使用webpack配置處理scss檔案的第三方外掛
第一步：安裝sass-loader，node-sass
第二步：使用Es6語法匯入模組資訊
// 4. 匯入scss檔案 import './css/index.scss' 第三步：配置載入器loader module : { // 這個節點用於配置所有的第三方模組載入器 rules : [ // 在這裡配置所有第三方的匹配規則,（匹配所有以.css結尾的檔案） { test : /\.css$/, // 注意這些CSSloader的呼叫方式是從右到左的順序來呼叫的 use : ['style-loader', 'css-loader'] // 對所有的CSS格式的檔案實現一個CSS樣式處理（使用載入器進行處理css樣式的檔案） }, { // less 也是一種未編譯的CSS test : /\.less$/, // 先編譯成css檔案，然後執行上面的cdd步驟 use : ['style-loader', 'css-loader', 'less-loader'] }, { // 處理SCSS格式樣式表資訊 test : /\.scss$/, use : ['style-loader', 'css-loader', 'sass-loader'] } ] }
6.Webpack中url-loader 的使用
6.1 圖片的處理
第一步：安裝url-loader, file-loader
第二步：開始配置引數資訊
module : { // 這個節點用於配置所有的第三方模組載入器 rules : [ // 在這裡配置所有第三方的匹配規則,（匹配所有以.css結尾的檔案） { test : /\.css$/, // 注意這些CSSloader的呼叫方式是從右到左的順序來呼叫的 use : ['style-loader', 'css-loader'] // 對所有的CSS格式的檔案實現一個CSS樣式處理（使用載入器進行處理css樣式的檔案） }, { // less 也是一種未編譯的CSS test : /\.less$/, // 先編譯成css檔案，然後執行上面的cdd步驟 use : ['style-loader', 'css-loader', 'less-loader'] }, { // 處理SCSS格式樣式表資訊 test : /\.scss$/, use : ['style-loader', 'css-loader', 'sass-loader'] }, { test : /\.(jpg|png|gif|bmp|jpeg)$/, // 1. 由於file-loader 是url-loader內部支援的，因此不需要在這裡引入， 一個loader是不需要使用陣列的 // 2. 這裡的傳參類似於URL傳參 // 3. limit給定的值是圖片的大小，如果圖片大小（單位byte）大於或者等於給定的limit值，則不會轉換為base64編碼格式的值 // 4. 如果小於的limit， 就會被轉換為base64編碼的字串 // 5. 為了實現圖片的名字不被修改， 這裡需要配置一下圖片的引數資訊(後面的會覆蓋掉前面的圖片) // 6. 為了實現不同資料夾下面的同名檔案不能衝突，這裡需要隨機生成一個hash值(預設是一個32位的，這裡只取出前面的8位數) use : 'url-loader?limit=3276&name=[hash:8]-[name].[ext]' } ] }
6.2 字型檔案的處理
第一步：安裝url-loader
第二步：匯入bootstrap樣式檔案
// 5. 匯入bootstrap樣式(如果需要使用路徑的方式來引入node_models中的 相關檔案， // 可以直接省略 node_models這個目錄，然後跟上路徑資訊， 不寫node_models也是可以的) import 'bootstrap-3.3.5/dist/css/bootstrap.css' 第三步：配置字型檔案的引數 module : { // 這個節點用於配置所有的第三方模組載入器 rules : [ // 在這裡配置所有第三方的匹配規則,（匹配所有以.css結尾的檔案） { test : /\.css$/, // 注意這些CSSloader的呼叫方式是從右到左的順序來呼叫的 use : ['style-loader', 'css-loader'] // 對所有的CSS格式的檔案實現一個CSS樣式處理（使用載入器進行處理css樣式的檔案） }, { // less 也是一種未編譯的CSS test : /\.less$/, // 先編譯成css檔案，然後執行上面的cdd步驟 use : ['style-loader', 'css-loader', 'less-loader'] }, { // 處理SCSS格式樣式表資訊 test : /\.scss$/, use : ['style-loader', 'css-loader', 'sass-loader'] }, { test : /\.(jpg|png|gif|bmp|jpeg)$/, // 1. 由於file-loader 是url-loader內部支援的，因此不需要在這裡引入， 一個loader是不需要使用陣列的 // 2. 這裡的傳參類似於URL傳參 // 3. limit給定的值是圖片的大小，如果圖片大小（單位byte）大於或者等於給定的limit值，則不會轉換為base64編碼格式的值 // 4. 如果小於的limit， 就會被轉換為base64編碼的字串 // 5. 為了實現圖片的名字不被修改， 這裡需要配置一下圖片的引數資訊(後面的會覆蓋掉前面的圖片) // 6. 為了實現不同資料夾下面的同名檔案不能衝突，這裡需要隨機生成一個hash值(預設是一個32位的，這裡只取出前面的8位數) use : 'url-loader?limit=3276&name=[hash:8]-[name].[ext]' }, { // 用於處理bootstrap中的字型檔案的loader項 test : /.(ttf|eot|svg|woff|woff2)$/, use : 'url-loader' } ] }
6. Webpack中Babel的配置
第一步：使用ES6的語法編寫程式碼
import $ from 'jquery'; import './css/index.css' import './css/index.less' import './css/index.scss' import 'bootstrap-3.3.5/dist/css/bootstrap.css' // class 關鍵字是ES6中提供的新的語法，是用來實現ES6中面向物件程式設計的方式 class Person { // 1. static關鍵字用於建立靜態屬性 // 2. 所謂的靜態屬性就是可以直接通過類名+info的方式來直接獲取的方式 // 3. 例項屬性是隻能通過類的例項物件才可以訪問的屬性 static info = {name : 'zhangsan', age : 12} } // 實現面向物件的程式設計(Class 是從後端語言借鑑過來的，來實現面向物件程式設計的) var pl = new Person(); // 在Webpack中預設只能處理一部分ES6的新語法，一些更高階的Es6語法和ES7語法，Webpack是處理不了的；這時候，藉助於第三方的loader，來幫助webpack來處理 // 這些高階的語法，當第三方的loader把高階語法轉換為低階語法之後，會把結果交給webpack去打包到bundle.js 中去 console.log(Person.info); // =================================================================== // 1. webpack中安裝Babel可以把高階語法轉換為低階語法 // 1.1 npm install babel-core babel-loader babel-plugin-transform-runtime --save // 1.2 npm install babel-preset-env babel-preset-stage-0 --save // 2. 在webpack的配置檔案中， module幾點下的rules陣列中，新增一個新的匹配規則 // 2.1 {test : /\.js$/, use : 'babel-loader', exclude : /node_models/} // 2.3 在配置babel的時候，必須把node_models目錄， 通過exclude 選項排除 // 2.4 如果不排除的話， 會非常消耗計算機的CPU，， 同時打包速度非常慢 // 2.5 即使把node_models 中的JS全部轉換完畢了，專案也無法正常執行 // 3. 在專案的根目錄中，新建一個叫做.babelrec 的Babel的JSON配置檔案，這個配置檔案博旭符合JSON規範 // { // "presets" : [], // "plugins" : ["transform-runtime"] // } // =================================================================== 第一套是一個轉換器，第二個是一個語法之間的轉換對應關係 Babel-preset-env 是一個比較新的ES語法，之前，安裝的是babel-preset-es2015,目前的這個babel-preset-env中包含了所有的和ES相關的語法。（語法範圍更廣）
第二步：安裝相關的依賴（注意包的版本號）
"dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-preset-stage-0": "^6.24.1", "bootstrap": "^3.3.5", "css-loader": "^1.0.0", "file-loader": "^2.0.0", "html-webpack-plugin": "^3.2.0", "jquery": "^3.3.1", "less": "^3.8.1", "less-loader": "^4.1.0", "node-sass": "^4.9.3", "sass": "^1.14.2", "sass-loader": "^7.1.0", "save": "^2.3.2", "style-loader": "^0.23.1", "url-loader": "^1.1.2", "webpack": "^4.20.2", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.9" }, 第三步：新建一個.babelrc檔案並配置 { "presets": ["env", "stage-0"], "plugins": ["transform-runtime"] } 第四步：配置webpack.config.js 檔案 { // 用於轉換ES的高階語法到高階語法 test : /\.js$/, use : 'babel-loader', exclude : /node_modules/ }
7.webpack呼叫第三方loader外掛的過程
// ===========================================================
// Webpack處理第三方檔案型別的過程：
// 1. 如果發現檔案型別不是js檔案，就去配置檔案中查詢有沒有第三方loader 的規則
// 2. 如果找到了對應的規則，就回去呼叫對應的 loader 處理這種檔案型別
// 3. 在呼叫loader的時候，是按照陣列中“從後往前”的順序來執行處理呼叫的
// 4. 當最後的一個loader呼叫完畢，就會把處理的結果，直接交給webpack進行打包合併， 最終輸出到bundle.js 這個檔案中去
// ===========================================================