webpack的概念：
本質上，webpack 是一個現代 JavaScript 應用程式的靜態模塊打包器(module bundler)。當 webpack 處理應用程式時，它會遞回地構建一個依賴關系圖(dependency graph)，其中包含應用程式需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。
webpack的用處：
webpack能夠處理JS檔案的互相依賴關系，整個專案就只需要一個main.js就行 。
webpack能夠處理JS的兼容問題，把高級的、瀏覽器不能識別的語法轉成低級的、瀏覽器能夠識別的語法
webpack基本的使用方式（使用前需安裝node）：
- 全域安裝：在終端命令列輸入npm i webpack -g
- 本地安裝：在根目錄中運行npm i webpack --save-dev安裝到專案依賴中
- 安裝jquery:
- 使用npm安裝，先初始化：npm init -y
- 安裝：npm i jquery -S
- 匯入jquery模塊
- 在main.js匯入jquery模塊：import $ from 'jquery'
- 使用webpack把main.js進行打包
- webpack .\src\main.js -o .\dist\bundle.js --mode=development
- 打開服務器，在瀏覽器查看頁面：npm run dev
使用webpack-dev-server工具來實作自動打包編譯的功能：
- 運行 npm i webpack-dev-server -D ，把這個工具安裝到專案的本地開發依賴
- 安裝完后，webpack-dev-server的用法和webpack完全一樣
- 由于是在專案的本地安裝的webpack-dev-server，所以無法把它當作腳本命令在終端中直接運行。只有那些安裝到全域 -g的工具才能在終端中正常執行
- webpack-dev-server幫我們打包生成的bundle.js檔案沒有放到實際的物理磁盤上，而是托管到電腦的記憶體中，所以我們在專案的根目錄中根本找不到這個打包好的bundle.js
在webpack.config.js中進行配置
module.exports = {
//入口，表示要使用webpack打包哪個檔案
entry: './src/main.js',
//輸出檔案相關配置
output: {
path: path.resolve(__dirname, './dist'), //指定打包好的檔案，輸出到哪個目錄中去
filename: 'bundle.js' //指定輸出檔案的名稱
},
mode: 'development',
devServer: { //配置dev-server命令引數的第二種方法，相對來說麻煩一點
open: true, //自動打開瀏覽器
port: 6000, //設定啟動時候的運行埠
contentBase: path.join(__dirname, "src"), //指定托管的根目錄
hot: true, //熱更新
},
plugins: [
new htmlWebpackPlugin({ //第三部，創建一個在記憶體中生成HTML頁面的插件
template: path.join(__dirname, './src/index.html'), //指定模板頁面的路徑
filename: 'index.html'
})
],
}配置處理css樣式表的第三方loader
- 使用import語法，匯入css樣式表
- webpack默認只能打包處理JS型別的檔案,無法處理其他的非JS型別的檔案l如果需要處理非JS型別的檔案，我們需要手動安裝一些合適的第三方loader加載器
- 打包處理css檔案，需要安裝cnpm i style-loader css-loader -D
- 打開webpack.config.js，新增一個配置節點，叫做module,他是一個物件，在這個module物件身上，有個rules屬性，這個rules屬性是個陣列，這個陣列中存放了所有第三方檔案的匹配和處理規則
module: { //這個節點用于配置所有的第三方模塊加載器
rules: [ //所有第三方模塊的匹配規則
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}配置處理less檔案的loader
手動安裝適合less的第三方loader
- cnpm i less -D
- cnpm i less-loader -D
配置規則
module: { //這個節點用于配置所有的第三方模塊加載器
rules: [ //所有第三方模塊的匹配規則
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}配置處理scss檔案的loader
手動安裝適合scss的第三方loader
- cnpm i sass-loader -D
- cnpm i node-sass -D
配置規則
module: { //這個節點用于配置所有的第三方模塊加載器
rules: [ //所有第三方模塊的匹配規則
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.scss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}]
}
]
}uj5u.com熱心網友回復：
學到了學到了，博主真厲害uj5u.com熱心網友回復：
我的理解是webpack處理第三方檔案型別的程序：1、發現這個要處理的檔案不是JS檔案，就去組態檔中查找是否存在對應的第三方LOADER規則2、如果找到對應的規則，就會呼叫Loader處理這種檔案型別
3、呼叫loader時，是從后往前呼叫的
4、當呼叫到最后沒有Loader時，就交給webpack進行打包處理
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/83093.html
標籤：其他