詳解Webpack 中路徑的相關配置

這篇文章主要為大家介紹了關於Webpack2中路徑配置的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。

前言

Webpack2 中有很多涉及路徑參數配置，若不知其所以然，很容易混淆出錯。本文盡可能的匯集了 Webpack2 中涉及路徑的配置，力求深入淺出。

context

context 是 webpack 編譯時的基礎目錄，入口起點（entry）會相對於此目錄尋找。

預設值為目前目錄，webpack設定context 預設值程式碼 可以本機下載：

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

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

context 應該配置為絕對路徑，假如入口起點為src/main.js，則可以設定：

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

此時entry 不能再設定為'./src/main.js'，因為webpack 會相對於context 配置的src 目錄區查找入口起點（main.js），而main.js 就在此目錄下，所以應當將entry 配置為當前目錄（. /）。

context 有什麼實際作用？官方文件的解釋是使得你的配置獨立於工程目錄 “This makes your configuration independent from CWD (current working directory)”。怎麼理解？舉個例子，在分離開發生產設定檔時候，一般把webpack.config 放到build 資料夾下，此時entry 卻不用考慮相對於build 目錄來配置，仍然要相對於context 來配置，這也就是所謂的獨立於工程目錄。

要注意的是，output 的配置項目和 context 沒有關係，但是有些插件的配置項目和 context 有關，後面會說明。

output

#output.path

打包檔案輸出的目錄，建議配置為絕對路徑（相對路徑不會報錯），預設值和context 的預設值一樣，都是process.cwd()。

除了常規的設定方式，還可以在path 中使用[hash] 模板，例如設定：

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

打包後的目錄如下：

這裡的hash 值是編譯過程的hash，如果被打包進來的內容改變了，那麼hash 值也會改變。這個可以用於版本回滾。你也可以設定為path.resolve(`./dist/${Date.now()}/`)方便做持續整合等。

ouput.publicPath

##記得最開始學習Webpack 的時候，一直沒把publiPath 理解透徹，甚至還錯誤的認為它和

output.path 有關聯。這個配置項在許多場景是非常重要的，如果不深入理解，就不能靈活運用。

怎麼快速又準確的理解publicPath，我覺得可以用下面的這個公式來表述：

#靜態資源最終訪問路徑=

output.publicPath + 資源loader或插件等配置路徑

舉例說明：

output.publicPath = '/static/'

// 图片 url-loader 配置
{
 name: 'img/[name].[ext]'
}
// 那么图片最终的访问路径为
output.publicPath + 'img/[name].[ext]' = '/static/img/[name].[ext]'

// JS output.filename 配置
{
 filename: 'js/[name].js'
}
// 那么JS最终访问路径为 
output.publicPath + 'js/[name].js' = '/static/js/[name].js'

// CSS 
new ExtractTextPlugin("css/style.css")
// 那么最终CSS的访问路径为
output.publicPath + 'css/style.css' = '/static/css/style.css'

publicPath 預設值為空

字串，接下來看其他各種常見的publicPath 配置的實際意義。

publicPath 設為相對路徑，相對路徑實際上是相對於index.html的路徑，為什麼這麼說？例如

publicPath:"./dist/" ，JS檔案名稱為bundle.js，按上面的公式，最終存取JS的路徑為./dist/bundle.js， 這個路徑同時也是index.html引用bundle.js的路徑，既然要在index.html透過相對路徑引用bundle.js，那麼index.html的位置就決定了publicPath 的配置，例如index.html在A資料夾下，而發佈的路徑不想放到A資料夾裡，而是想和A資料夾同級，那麼就應配置為publicPath :"../dist/" ，這就是相對於index.html的路徑來講，bundle .js在上一層的dist資料夾裡。相對路徑的好處是本地可以訪問，例如一些混合 APP 用的file協議，用絕對路徑肯定是不行的。

publicPath 設為相對於協定url（//）或http位址（http://），例如

publicPath:'http://wwww.qinshenxue.com/static/' ，開發環境當然是不能這麼幹，使用這個的場景是將資源託管到CDN，例如公司的靜態資源伺服器等。

另外publicPath應該以'/'結尾，同時其他loader或外掛程式的配置不要以'/'開頭。

webpack-dev-server

#publicPath

###############publicPath###################################

上面讲过 webpack 的 publicPath，那么这里的 publicPath 和 上面的publicPath是不是一回事呢？答案是两者区别很大，首先这里的publicPath用于开发环境的，因此不会出现配置 http 地址的情况，那这两者到底有啥区别呢？

我们知道 webpack-dev-server 打包的内容是放在内存中，通过express匹配请求路径，然后读取对应的资源输出。这些资源对外的根目录就是publicPath，可以理解为和 outpu.path 的功能一样，将所有资源放在此目录下，在浏览器可以直接访问此目录下的资源。

但是这个路径仅仅只是为了提供浏览器访问打包资源的功能，webpack中的loader和插件仍然是取ouput.publicPath，比如CSS里面的图片最终的路径仍是"/static/img/xxxx.png"，这也是为什么官方推荐 publicPath 和 webpack 配置的保持一致（除了http地址），配置一致才能正常访问其他静态资源。

上面的解释可能还是比较生硬，还是举几个例子来说明：

本例将两处 publicPath 配置成不一样的，这样更容易对比理解。

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

// api 调用 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 所有启动后的资源访问路径呢？有个简单的方法，就是访问/webpack-dev-server，本例访问截图如下：

上面的资源可以点击查看，你会发现，资源的路径都是/web/*****，所以在index.html中引入JS的路径应为/web/js/main.js，同时也能看到，style.css中的图片路径仍然为/static/img/****.png，而不是/web/。

html-webpack-plugin

这个插件的几处配置受路径配置影响，因此需要专门说明下。

template

template的路径是相对于 output.context，源码如下：

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

因此 template 对应的文件需要放在 ouput.context 配置的目录下才能被识别。

filename

filename的路径是相对于 output.path，源码如下：

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

在 webpack-dev-server 中，则相对于 webpack-dev-server 配置的 publicPath。

若 webpack-dev-server 中的 publicPath 和 ouput.publicPath 不一致，在这种配置下使用html-webpack-plugin是有如下问题：

• 自动引用的路径仍然以 ouput.publicPath 为准，和 webpack-dev-server 提供的资源访问路径不一致，从而不能正常访问；

• 浏览 index.html 需要加上 webpack-dev-server 配置的 publicPath 才能访问（http://localhost:8282/web/）。
  

这两个问题也反推出了最方便的配置为：

• ouput.publicPath 和 webpack-dev-server 的publicPath 均配置为'/'，vue-cli 就是这种配置

• template 放在根目录，html-webpack-plugin 不用修改参数的路径，filename 采用默认值。

总结

目前就针对上面基础路径做了简单的解释说明，如有错误，请不吝指出，后续若发现其他相关路径配置，再作补充。

以上是詳解Webpack 中路徑的相關配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！