Webpack 是什么

Vue CLI Webpack 相關(guān)?

Webpack

更多參考官方文檔

Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。?

如圖，Webpack 可以將多種靜態(tài)資源 js、css、less 轉(zhuǎn)換成一個(gè)靜態(tài)文件，減少了頁面的請求。

本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。

如果你還不熟悉 webpack，請閱讀核心概念和打包器對比

安裝

前提，本地支持 node.js
安裝最新版本?npm install --save-dev webpack
如果你使用 webpack 4+ 版本，你還需要安裝 CLI。?npm install --save-dev webpack-cli

對于大多數(shù)項(xiàng)目，我們建議本地安裝。這可以使我們在引入破壞式變更(breaking change)的依賴時(shí)，更容易分別升級項(xiàng)目。通常，webpack 通過運(yùn)行一個(gè)或多個(gè) npm scripts，會(huì)在本地 node_modules 目錄中查找安裝的 webpack：

"scripts": {
"start": "webpack --config webpack.config.js"
}

當(dāng)你在本地安裝 webpack 后，你能夠從 node_modules/.bin/webpack 訪問它的 bin 版本。

全局安裝(不推薦)?npm install --global webpack：不推薦全局安裝 webpack。這會(huì)將你項(xiàng)目中的 webpack 鎖定到指定版本，并且在使用不同的 webpack 版本的項(xiàng)目中，可能會(huì)導(dǎo)致構(gòu)建失敗。

核心概念

webpack 是高度可配置的。四個(gè)核心概念：

入口(entry) 輸出(output) loader 插件(plugins)

入口(entry)

入口起點(diǎn)(entry point)指示 webpack 應(yīng)該使用哪個(gè)模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始。進(jìn)入入口起點(diǎn)后，webpack 會(huì)找出有哪些模塊和庫是入口起點(diǎn)(直接和間接)依賴的。

每個(gè)依賴項(xiàng)隨即被處理，最后輸出到稱之為 bundles 的文件中，我們將在下一章節(jié)詳細(xì)討論這個(gè)過程。

可以通過在 webpack 配置中配置 entry 屬性，來指定一個(gè)入口起點(diǎn)(或多個(gè)入口起點(diǎn))。默認(rèn)值為 ./src。

接下來我們看一個(gè) entry 配置的最簡單例子：

webpack.config.js

module.exports = {
entry: './path/to/my/entry/file.js'
};

根據(jù)應(yīng)用程序的特定需求，可以以多種方式配置 entry 屬性。可以了解更多配置方式。

出口(output)

output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles，以及如何命名這些文件，默認(rèn)值為 ./dist。基本上，整個(gè)應(yīng)用程序結(jié)構(gòu)，都會(huì)被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個(gè) output 字段，來配置這些處理過程：?

webpack.config.js

const path = require('path');

module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};

通過 output.filename 和 output.path 屬性，來告訴 webpack bundle 的名稱，以及我們想要 bundle 生成(emit)到哪里。可能你想要了解在代碼最上面導(dǎo)入的 path 模塊是什么，它是一個(gè) Node.js 核心模塊，用于操作文件路徑。

生成(emitted 或 emit) 是“生產(chǎn)(produced)”或“釋放(discharged)”的特殊術(shù)語

更多 output 可配置的特性
更多 output 概念

loader

loader 讓 webpack 能夠去處理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進(jìn)行處理。

本質(zhì)上，webpack loader 將所有類型的文件，轉(zhuǎn)換為應(yīng)用程序的依賴圖(和最終的 bundle)可以直接引用的模塊。

loader 能夠 import 導(dǎo)入任何類型的模塊(例如 .css 文件)，這是 webpack 特有的功能，其他打包程序或任務(wù)執(zhí)行器的可能并不支持。我們認(rèn)為這種語言擴(kuò)展是有很必要的，因?yàn)檫@可以使開發(fā)人員創(chuàng)建出更準(zhǔn)確的依賴關(guān)系圖。

在更高層面，在 webpack 的配置中 loader 有兩個(gè)目標(biāo)：

test 屬性，用于標(biāo)識(shí)出應(yīng)該被對應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的某個(gè)或某些文件。

use 屬性，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè) loader。

webpack.config.js

const path = require('path');

const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};

module.exports = config;

以上配置中，對一個(gè)單獨(dú)的 module 對象定義了 rules 屬性，里面包含兩個(gè)必須屬性：test 和 use。這告訴 webpack 編譯器(compiler) 如下信息：“嘿，webpack 編譯器，當(dāng)你碰到「在 require()/import 語句中被解析為 '.txt' 的路徑」時(shí)，在你對它打包之前，先使用 raw-loader 轉(zhuǎn)換一下。”

在 webpack 配置中定義 loader 時(shí)，要定義在 module.rules 中，而不是 rules。在定義錯(cuò)誤時(shí) webpack 會(huì)給出嚴(yán)重的警告。

插件(plugins)

loader 被用于轉(zhuǎn)換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量。插件接口功能極其強(qiáng)大，可以用來處理各種各樣的任務(wù)。

想要使用一個(gè)插件，你只需要 require() 它，然后把它添加到 plugins 數(shù)組中。多數(shù)插件可以通過選項(xiàng)(option)自定義。你也可以在一個(gè)配置文件中因?yàn)椴煌康亩啻问褂猛粋€(gè)插件，這時(shí)需要通過使用 new 操作符來創(chuàng)建它的一個(gè)實(shí)例。

webpack.config.js?

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用于訪問內(nèi)置插件

const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};

module.exports = config;

插件列表

模式

通過選擇 development 或 production 之中的一個(gè)，來設(shè)置 mode 參數(shù)，你可以啟用相應(yīng)模式下的 webpack 內(nèi)置的優(yōu)化

module.exports = {
mode: 'production'
};

Getting Started

從零開始一個(gè)基本的構(gòu)建過程

Vue CLI Webpack 相關(guān)

簡單的配置方式

webpack 配置最簡單的方式就是在?vue.config.js?中的?configureWebpack?選項(xiàng)提供一個(gè)對象：

// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}

該對象將會(huì)被 webpack-merge 合并入最終的 webpack 配置。

有些 webpack 選項(xiàng)是基于?vue.config.js?中的值設(shè)置的，所以不能直接修改。例如，應(yīng)該修改?vue.config.js?中的?outputDir?選項(xiàng)而不是?output.path；應(yīng)該修改?vue.config.js?中的?publicPath?選項(xiàng)而不是?output.publicPath。因?yàn)?vue.config.js?中的值會(huì)被用在配置里的多個(gè)地方，以確保所有的部分都能正常工作在一起。:::

如果需要基于環(huán)境有條件地配置行為，或者想要直接修改配置，那就換成一個(gè)函數(shù) (該函數(shù)會(huì)在環(huán)境變量被設(shè)置之后懶執(zhí)行)。該方法的第一個(gè)參數(shù)會(huì)收到已經(jīng)解析好的配置。在函數(shù)內(nèi)，你可以直接修改配置，或者返回一個(gè)將會(huì)被合并的對象：

// vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 為生產(chǎn)環(huán)境修改配置...
} else {
// 為開發(fā)環(huán)境修改配置...
}
}
}

鏈?zhǔn)讲僮?(高級) Chaining (Advanced)

Vue CLI 內(nèi)部的 webpack 配置是通過 webpack-chain 維護(hù)的。這個(gè)庫提供了一個(gè) webpack 原始配置的上層抽象，使其可以定義具名的 loader 規(guī)則和具名插件，并有機(jī)會(huì)在后期進(jìn)入這些規(guī)則并對它們的選項(xiàng)進(jìn)行修改。

它允許更細(xì)粒度的控制其內(nèi)部配置。常見修改?vue.config.js?中的?chainWebpack

修改 Loader 選項(xiàng)

// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// 修改它的選項(xiàng)...
return options
})
}
}

對于 CSS 相關(guān) loader 來說，推薦使用 css.loaderOptions 而不是直接鏈?zhǔn)街付?loader。這是因?yàn)槊糠N CSS 文件類型都有多個(gè)規(guī)則，而?css.loaderOptions?可以確保你通過一個(gè)地方影響所有的規(guī)則。

添加一個(gè)新的 Loader

// vue.config.js
module.exports = {
chainWebpack: config => {
// GraphQL Loader
config.module
.rule('graphql')
.test(/\.graphql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end()
// 你還可以再添加一個(gè) loader
.use('other-loader')
.loader('other-loader')
.end()
}
}

替換一個(gè)規(guī)則里的 Loader

如果你想要替換一個(gè)已有的基礎(chǔ) loader，例如為內(nèi)聯(lián)的 SVG 文件使用?vue-svg-loader?而不是加載這個(gè)文件：

// vue.config.js
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')

// 清除已有的所有 loader。
// 如果你不這樣做，接下來的 loader 會(huì)附加在該規(guī)則現(xiàn)有的 loader 之后。
svgRule.uses.clear()

// 添加要替換的 loader
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
}
}

修改插件選項(xiàng)

// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
return [/* 傳遞給 html-webpack-plugin's 構(gòu)造函數(shù)的新參數(shù) */]
})
}
}

你需要熟悉 webpack-chain 的 API 并閱讀一些源碼以便了解如何最大程度利用好這個(gè)選項(xiàng)，但是比起直接修改 webpack 配置，它的表達(dá)能力更強(qiáng)，也更為安全。

比方說你想要將?index.html?默認(rèn)的路徑從?/Users/username/proj/public/index.html?改為?/Users/username/proj/app/templates/index.html。通過參考 html-webpack-plugin 能看到一個(gè)可以傳入的選項(xiàng)列表。可以在下列配置中傳入一個(gè)新的模板路徑來改變它：

// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].template = '/Users/username/proj/app/templates/index.html'
return args
})
}
}

可以通過接下來要討論的工具?vue inspect?來確認(rèn)變更。

審查項(xiàng)目的 webpack 配置

Inspecting the Project's Webpack Config?

因?yàn)?@vue/cli-service?對 webpack 配置進(jìn)行了抽象，所以理解配置中包含的東西會(huì)比較困難，尤其是當(dāng)你打算自行對其調(diào)整的時(shí)候。

vue-cli-service?暴露了?inspect?命令用于審查解析好的 webpack 配置。那個(gè)全局的?vue?可執(zhí)行程序同樣提供了?inspect?命令，這個(gè)命令只是簡單的把?vue-cli-service inspect?代理到了你的項(xiàng)目中。

該命令會(huì)將解析出來的 webpack 配置、包括鏈?zhǔn)皆L問規(guī)則和插件的提示打印到 stdout。

你可以將其輸出重定向到一個(gè)文件以便進(jìn)行查閱：

vue inspect > output.js

它輸出的并不是一個(gè)有效的 webpack 配置文件，而是一個(gè)用于審查的被序列化的格式。

也可以通過指定一個(gè)路徑來審查配置的一小部分：

# 只審查第一條規(guī)則
vue inspect module.rules.0

或者指向一個(gè)規(guī)則或插件的名字：

vue inspect --rule vue
vue inspect --plugin html

最后，你可以列出所有規(guī)則和插件的名字：

vue inspect --rules
vue inspect --plugins

以一個(gè)文件的方式使用解析好的配置

有些外部工具可能需要通過一個(gè)文件訪問解析好的 webpack 配置，比如那些需要提供 webpack 配置路徑的 IDE 或 CLI。在這種情況下你可以使用如下路徑：

/node_modules/@vue/cli-service/webpack.config.js

該文件會(huì)動(dòng)態(tài)解析并輸出?vue-cli-service?命令中使用的相同的 webpack 配置，包括那些來自插件甚至是你自定義的配置。

總結(jié)

以上是生活随笔為你收集整理的vue webpack打包入口文件是哪个_Vue 学习笔记（二十五）：webpack 相关的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。