1. 簡介
webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。主要是用來將前端資源打包、壓縮、做代碼的優化。
webpack 打包原理:
當 webpack 處理應用程序時,不會根據 package.json 文件中的devDependencies 或者 Dependencies 的內容對文件進行打包。而是會根據入口文件做查詢,加載其所依賴的包模塊,它會遞歸地構建一個依賴關係圖(dependency graph),其中包含應用程序需要的每個模塊,然後將所有這些模塊打包成一個或多個 bundle。
2. 安裝
在安裝之前,請確保安裝了 Node.js 的最新版本。使用 Node.js 最新的長期支持版本(LTS - Long Term Support),是理想的起步。使用舊版本,你可能遇到各種問題,因爲它們可能缺少 webpack 功能以及/或者缺少相關 package 包。
不推薦全局安裝 webpack。這會將你項目中的 webpack 鎖定到指定版本,並且在使用不同的 webpack 版本的項目中,可能會導致構建失敗。
本地安裝。可以使我們更容易對不同的項目進行分別升級。通常,webpack 通過運行一個或多個 npm scripts,會在本地 node_modules 目錄中查找安裝的 webpack:
"scripts": {
"start": "webpack"
}
如果你使用 webpack 4+ 版本,你還需要安裝 CLI。webpack-cli 可以允許直接在控制檯操作webpack命令。
使用npm安裝:
npm install webpack webpack-cli --save-dev
或者使用yarn安裝:
yarn add webpack webpack-cli -D
終端中輸入 webpack --help,可以查看所有的幫助信息。
3. 配置
從webpack 4.0.0 版本開始,可以不用引入一個配置文件。然而,webpack 仍然還是高度可配置的。webpack 是在node環境下運行的,使用commonJs規範。webpack.config.js相當於gulp中的gulpfile.js。
這裏用的項目目錄結構如下:
接下來,我們來認識webpack 中的四個核心概念:
- 入口(entry)
- 輸出(output)
- loader
- 插件(plugins)
3.1 入口 entry
在webpack.config.js配置文件中,通過設置entry字段的值,指定一個入口起點(或多個入口起點),不配置的話,默認入口起點爲src目錄下的index.js模塊。
默認值爲:
module.exports = {
entry: './src'
//相當於
entry:{ main:"/src/index.js" }
};
單頁面配置:
module.exports = {
entry: './path/to/my/entry/file.js'
};
多頁面配置:
module.exports = {
entry: {
'main': "./src/js/index.js",
'detail': "./src/js/detai.js"
}
};
3.2 output 輸出
output 屬性告訴 webpack 在哪裏輸出它所創建的 bundles,以及如何命名這些文件,默認值爲 ./dist。基本上,整個應用程序結構,都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個 output 字段,來配置這些處理過程:
默認值爲:
const path = require('path');
module.exports = {
output: {
//path需要爲絕對路徑
path: path.resolve(__dirname, './dist'),
filename: 'main.js'
}
};
自定義配置:
output 的 filename屬性中,使用[name]
來表示entry中的key;使用[hash]
,會自動在文件名稱後面添加hash值,並直接關聯到html模板文件中。
const path = require('path');
module.exports = {
entry: {
'main': "./src/js/index.js",
'detail': "./src/js/detai.js"
},
output: {
path: path.resolve(__dirname, './dev'),
filename: '[name]-[hash].js'
},
};
3.3 loader
loader 讓 webpack 能夠去處理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。簡單來說,loader 就是一個翻譯官,將瀏覽器不認識的語言,轉化爲瀏覽器能解析的語言,loader使用之前需要先安裝。
注意:loader 能夠 import 導入任何類型的模塊(例如 .scss 文件),這是 webpack 特有的功能,其他打包程序或任務執行器的可能並不支持。
import '../style/common.scss'
webpack.config.js文件:
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/,
//執行順序:從右向左
use: [
// 將 JS 字符串生成爲 style 節點,插入html中,生成內聯樣式
'style-loader',
//將 CSS 轉化成 CommonJS 模塊,可以直接使用import/require導入
'css-loader',
//把.scss文件文件轉換爲.css文件
'sass-loader'
]
}
]
}
};
style-loader是直接將樣式寫在 header 的 style 標籤中,如果想把樣式單獨打包成一個css文件,可以使用 mini-css-extract-plugin 插件。二者選其一就可以。
在webpack.config.js文件中,對一個單獨的 module 對象定義了 rules 屬性,裏面包含兩個必須屬性:test 和 use。這告訴 webpack 編譯器(compiler) 如下信息:
“嘿,webpack 編譯器,當你碰到「在 require()/import 語句中被解析爲 ‘.sass/.scss’ 的路徑」時,在你對它打包之前,先使用 sass-loader、css-loader、style-loader 轉換一下。最終.scss文件會被轉成內聯樣式,插入html頁面中。”
注意:
- rules 是一個對象型數組,需要定義在 module.rules 中。
- test 屬性,用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
- use 屬性,表示進行轉換時,應該使用哪個 loader。
- 當 use 裏有多個loader時,執行的順序爲從右向左。
3.4 plugins 插件
loader 被用於轉換某些類型的模塊,而插件則可以用於執行範圍更廣的任務。插件的範圍包括,從打包優化和壓縮,一直到重新定義環境中的變量。
想要使用一個插件,你只需要 require()
它,然後把它添加到 plugins 數組
中。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因爲不同目的而多次使用
同一個插件,這時需要通過使用 new
操作符來創建它的一個實例。
webpack.config.js文件:
//html-webpack-plugin 將html模板文件和js文件整合到一起
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
//模板文件路徑
template: "./src/views/index.html",
//自動存儲到output 配置的目錄
filename: 'index.html',
chunks: ['main']
})
]
};
html-webpack-plugin 插件的作用是將html模板文件和js文件整合到一起,如果是多頁面應該,則每個頁面都需要有對應的new HtmlWebpackPlugin()。
webpack在編譯的時候,會把所有的 js 合併輸出在一個js文件,而設置 chunks 屬性的目的,就是讓當前頁面模板只加載當前頁面所需要的模塊。上面的寫法表示,在編譯./src/views/index.html 時,只需要加載main.js文件。
3.5 mode 模式
mode 配置選項,告知 webpack 使用相應模式的內置優化。有兩個值:
- development,開發模式不會對代碼做壓縮、優化,方便代碼調試,會將 process.env.NODE_ENV 的值設爲 development。
- production,生產模式下會對代碼做壓縮、優化。會將 process.env.NODE_ENV 的值設爲 production。
module.exports = {
mode:"development",
};
如果不配置mode,會有警告信息,但是不影響項目運行
3.6 devtool
開發模式通常配合devtool 使用,可以在瀏覽器的控制檯看到源代碼,而不是解析後的代碼。
module.exports = {
//代碼調試,可以看到源代碼
devtool: 'inline-source-map',
};
3.7 webpack-dev-server
在開發模式下,新建一個開發服務器,並且當代碼更新的時候自動刷新瀏覽器。可以使用webpack-dev-server插件。
直接使用webpack執行,會對文件進行打包,並輸出在指定目錄下,默認爲./dev下。
使用webpack-dev-server執行,文件會放在內存裏,不會生成整合後的文件,也不會將文件輸出到指定目錄裏。
3.7.1 本地安裝:
npm install webpack-dev-server --save-dev
yarn add webpack-dev-server -D
默認安裝完後,會自動在 package.json腳本中定義啓動方法,使用的時候不需要再單獨引入 ,直接執行命令就可以。
3.7.2 使用:
有兩種主要的推薦使用模塊的方法:
一是使用CLI,在根目錄下運行:
node_modules / .bin / webpack-dev-server
二是使用npm腳本,在 package.json腳本中定義:
{
"scripts": {
//指定配置文件爲webpack.config.js
"dev": "webpack-dev-server --config webpack.config.js"
},
}
然後在終端中運行以下命令:
npm run dev
在webpack.config.js文件中配置
module.exports = {
devServer:{
contentBase:"./dist", //設置Http服務器的文件根目錄
port:8088, //端口
open:true, //是否打開瀏覽器
proxy: { //配置代理
"/api": {
target: "http://localhost:3000",
pathRewrite: {"^/api" : ""}
}
}
}
};
更多關於devServer的介紹可以查看官方文檔:https://www.webpackjs.com/configuration/dev-server
4. webpack.config.js
一個開發模式下,完整的webpack.config.js文件內容如下:
const path=require("path");
//將html模板和js文件整合在一起
const htmlWebpackPlugin=require("html-webpack-plugin");
//將css樣式提取出來,使用Link標籤導入
const miniCssExtractPlugin=require("mini-css-extract-plugin");
//將靜態資源打包到輸出目錄中
const copyWebpackPlugin=require("copy-webpack-plugin");
module.exports={
mode:"development",
devtool:"inline-source-map",
entry:"./src/js/index.js",
output:{
path:path.resolve(__dirname+"./dev"),
filename:"[name]-[hash].js"
},
devServer:{
port:8088,
open:true,
proxy: { //配置代理
"/api": {
target: "http://localhost:3000",
pathRewrite: {"^/api" : ""}
}
}
},
plugins:[
new htmlWebpackPlugin({
title:"demo title",
template:"./src/views/index.html",
filename:"index.html",
chunks:["main"]
}),
new miniCssExtractPlugin({
filename:"[name]-[hash].css"
}),
new copyWebpackPlugin([
{from:"./src/static",to:"./static"}
])
],
module:{
rules:[
{
test:/\.s[ac]ss$/,
use:[
miniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test:/\.html$/,
use:["string-loader"]
}
]
}
}
package.json文件內容如下:
{
"name": "admin-fe",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"handlebars": "^4.7.3",
"sme-router": "^0.12.8"
},
"devDependencies": {
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"html-webpack-plugin": "^4.0.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"string-loader": "^0.0.1",
"style-loader": "^1.1.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
啓動webpack項目時,在終端中執行,就可以自動打開瀏覽器。
npm run dev