這篇文章將為大家詳細(xì)講解有關(guān)Webpack中路徑配置的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出孝昌免費(fèi)做網(wǎng)站回饋大家。

context

context 是 webpack 編譯時(shí)的基礎(chǔ)目錄，入口起點(diǎn)（entry）會(huì)相對(duì)于此目錄查找。

默認(rèn)值為當(dāng)前目錄，webpack設(shè)置 context 默認(rèn)值代碼 可以本地下載：

this.set("context", process.cwd());

process.cwd()即webpack運(yùn)行所在的目錄（等同package.json所在目錄）。

context 應(yīng)該配置為絕對(duì)路徑，假如入口起點(diǎn)為src/main.js，則可以配置：

{
 context: path.resolve('./src'),
 entry: './main.js'
}

此時(shí) entry 不能再配置為'./src/main.js'，因?yàn)?webpack 會(huì)相對(duì)于 context 配置的 src 目錄區(qū)查找入口起點(diǎn)（main.js），而 main.js 就在此目錄下，所以應(yīng)當(dāng)將 entry 配置為當(dāng)前目錄（./）。

context 有什么實(shí)際作用？官方文檔的解釋是使得你的配置獨(dú)立于工程目錄 「This makes your configuration independent from CWD (current working directory)」。怎么理解？舉個(gè)例子，在分離開(kāi)發(fā)生產(chǎn)配置文件時(shí)候，一般把 webpack.config 放到 build 文件夾下，此時(shí) entry 卻不用考慮相對(duì)于 build 目錄來(lái)配置，仍然要相對(duì)于 context 來(lái)配置，這也就是所謂的獨(dú)立于工程目錄。

需要注意的是，output 的配置項(xiàng)和 context 沒(méi)有關(guān)系，但是有些插件的配置項(xiàng)和 context 有關(guān)，后面會(huì)說(shuō)明。

output

output.path

打包文件輸出的目錄，建議配置為絕對(duì)路徑（相對(duì)路徑不會(huì)報(bào)錯(cuò)），默認(rèn)值和 context 的默認(rèn)值一樣，都是process.cwd()。

除了常規(guī)的配置方式，還可以在 path 中用使用 [hash] 模板，比如配置：

output: {
 path: path.resolve('./dist/[hash:8]/'),
 filename: '[name].js'
}

打包后的目錄如下：

這里的 hash 值是編譯過(guò)程的 hash，如果被打包進(jìn)來(lái)的內(nèi)容改變了，那么 hash 值也會(huì)發(fā)生改變。這個(gè)可以用于版本回滾。你也可以配置為path.resolve(`./dist/${Date.now()}/`)方便做持續(xù)集成等。

ouput.publicPath

記得最開(kāi)始學(xué)習(xí) Webpack 的時(shí)候，一直沒(méi)把 publiPath 理解透徹，甚至還錯(cuò)誤的認(rèn)為它和 output.path 有關(guān)聯(lián)。這個(gè)配置項(xiàng)在很多場(chǎng)景是非常重要的，如果不深入理解，就不能靈活運(yùn)用。

怎么快速又準(zhǔn)確的理解 publicPath，我覺(jué)得可以用下面的這個(gè)公式來(lái)表述：

靜態(tài)資源最終訪問(wèn)路徑 = output.publicPath + 資源loader或插件等配置路徑

舉例說(shuō)明：

output.publicPath = '/static/'

// 圖片 url-loader 配置
{
 name: 'img/[name].[ext]'
}
// 那么圖片最終的訪問(wèn)路徑為
output.publicPath + 'img/[name].[ext]' = '/static/img/[name].[ext]'

// JS output.filename 配置
{
 filename: 'js/[name].js'
}
// 那么JS最終訪問(wèn)路徑為 
output.publicPath + 'js/[name].js' = '/static/js/[name].js'

// CSS 
new ExtractTextPlugin("css/style.css")
// 那么最終CSS的訪問(wèn)路徑為
output.publicPath + 'css/style.css' = '/static/css/style.css'

publicPath 默認(rèn)值為空字符串，接下來(lái)看其他各種常見(jiàn)的 publicPath 配置的實(shí)際意義。

publicPath 設(shè)為相對(duì)路徑，相對(duì)路徑實(shí)際上是相對(duì)于index.html的路徑，為什么這么說(shuō)？比如publicPath:"./dist/" ，JS文件名為bundle.js，按上面的公式，最終訪問(wèn)JS的路徑為./dist/bundle.js， 這個(gè)路徑同時(shí)也是index.html引用bundle.js的路徑，既然要在index.html通過(guò)相對(duì)路徑引用bundle.js，那么index.html的位置就決定了 publicPath 的配置，比如index.html在A文件夾下，而發(fā)布的路徑不想放到A文件夾里，而是想和A文件夾同級(jí)，那么就應(yīng)配置為publicPath :"../dist/" ，這就是相對(duì)于index.html的路徑來(lái)講，bundle.js在上一層的dist文件夾里。相對(duì)路徑的好處是本地可以訪問(wèn)，比如一些混合 APP 用的file協(xié)議，用絕對(duì)路徑肯定是不行的。

publicPath 設(shè)為相對(duì)于協(xié)議url（//）或http地址（http://），比如publicPath:'http://wwww.qinshenxue.com/static/' ，開(kāi)發(fā)環(huán)境當(dāng)然是不能這么干，使用這個(gè)的場(chǎng)景是將資源托管到cdn，比如公司的靜態(tài)資源服務(wù)器等。

另外publicPath應(yīng)該以'/'結(jié)尾，同時(shí)其他loader或插件的配置不要以'/'開(kāi)頭。

webpack-dev-server

publicPath

上面講過(guò) webpack 的 publicPath，那么這里的 publicPath 和 上面的publicPath是不是一回事呢？答案是兩者區(qū)別很大，首先這里的publicPath用于開(kāi)發(fā)環(huán)境的，因此不會(huì)出現(xiàn)配置 http 地址的情況，那這兩者到底有啥區(qū)別呢？

我們知道 webpack-dev-server 打包的內(nèi)容是放在內(nèi)存中，通過(guò)express匹配請(qǐng)求路徑，然后讀取對(duì)應(yīng)的資源輸出。這些資源對(duì)外的根目錄就是publicPath，可以理解為和 outpu.path 的功能一樣，將所有資源放在此目錄下，在瀏覽器可以直接訪問(wèn)此目錄下的資源。

但是這個(gè)路徑僅僅只是為了提供瀏覽器訪問(wèn)打包資源的功能，webpack中的loader和插件仍然是取ouput.publicPath，比如CSS里面的圖片最終的路徑仍是"/static/img/xxxx.png"，這也是為什么官方推薦 publicPath 和 webpack 配置的保持一致（除了http地址），配置一致才能正常訪問(wèn)其他靜態(tài)資源。

上面的解釋可能還是比較生硬，還是舉幾個(gè)例子來(lái)說(shuō)明：

本例將兩處 publicPath 配置成不一樣的，這樣更容易對(duì)比理解。

// webpack.config.js
output: {
 path: path.resolve(`./dist/`),
 filename: 'js/[name].js',
 publicPath: '/static/'
}

// api 調(diào)用 webpack-dev-server
var webpack = require('webpack');
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
 hot: true,
 publicPath: '/web/'
});
server.listen(8282, "0.0.0.0")

如何查看 webpack-dev-server 所有啟動(dòng)后的資源訪問(wèn)路徑呢？有個(gè)簡(jiǎn)單的方法，就是訪問(wèn)/webpack-dev-server，本例訪問(wèn)截圖如下：

上面的資源可以點(diǎn)擊查看，你會(huì)發(fā)現(xiàn)，資源的路徑都是/web/*****，所以在index.html中引入JS的路徑應(yīng)為/web/js/main.js，同時(shí)也能看到，style.css中的圖片路徑仍然為/static/img/****.png，而不是/web/。

html-webpack-plugin

這個(gè)插件的幾處配置受路徑配置影響，因此需要專(zhuān)門(mén)說(shuō)明下。

template

template的路徑是相對(duì)于 output.context，源碼如下：

this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);

因此 template 對(duì)應(yīng)的文件需要放在 ouput.context 配置的目錄下才能被識(shí)別。

filename

filename的路徑是相對(duì)于 output.path，源碼如下：

this.options.filename = path.relative(compiler.options.output.path, filename);

在 webpack-dev-server 中，則相對(duì)于 webpack-dev-server 配置的 publicPath。

若 webpack-dev-server 中的 publicPath 和 ouput.publicPath 不一致，在這種配置下使用html-webpack-plugin是有如下問(wèn)題：

• 自動(dòng)引用的路徑仍然以 ouput.publicPath 為準(zhǔn)，和 webpack-dev-server 提供的資源訪問(wèn)路徑不一致，從而不能正常訪問(wèn)；

• 瀏覽 index.html 需要加上 webpack-dev-server 配置的 publicPath 才能訪問(wèn)（http://localhost:8282/web/）。

這兩個(gè)問(wèn)題也反推出了最方便的配置為：

• ouput.publicPath 和 webpack-dev-server 的publicPath 均配置為'/'，vue-cli 就是這種配置

• template 放在根目錄，html-webpack-plugin 不用修改參數(shù)的路徑，filename 采用默認(rèn)值。

關(guān)于“Webpack中路徑配置的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

本文標(biāo)題：Webpack中路徑配置的示例分析
網(wǎng)站URL：http://aaarwkj.com/article46/peipeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、定制網(wǎng)站、Google、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)