深入通晓Webpack,webpack学习课程之public帕特h路径难点详解

by admin on 2019年6月15日

本文首要给我们介绍了有关webpack中public帕特h路线难点的相干内容,分享出来供大家参谋学习,下边来看看详细的牵线:

webpack学习课程之publicPath路线难点详解,webpackpublicpath

本文主要给大家介绍了关于webpack中publicPath路线难题的相干内容,分享出去供大家参谋学习,下边来探望详细的介绍:

output: {
  filename: "[name].js",
  path:path.resolve(__dirname,"build")
 }

一经未有一些名pubicPath,则引进路线如下

<body>
 <script src="b.js"></script>
</body>

只要有钦赐public帕特h

output: {
  filename: "[name].js",
  path:path.resolve(__dirname,"build"),
  publicPath:"/assets/"
 }

则引进如下

<body>
 <script src="assets/b.js"></script>
</body>

深入通晓Webpack,webpack学习课程之public帕特h路径难点详解。webpack-dev-server情况下,path、publicPath、不相同与调换

path:钦点编写翻译目录而已(/build/js/),不能够用来html中的js引用。

publicPath:虚拟目录,自动指向path编写翻译目录(/assets/ =>
/build/js/)。html中引用js文件时,必须引用此虚拟路线(但事实上引用的是内部存款和储蓄器中的公文,既不是/build/js/也不是/assets/)。

===================================================

揭露至生产条件:

1.webpack开展编写翻译(当然是编写翻译到/build/js/)

2.把编写翻译目录(/build/js/)下的文件,全部复制到/assets/目录下(注意:不是去修改index.html中引用bundle.js的门径)

事先因为publicPath的路径错误原因,导致webpack-dev-server不可能自动刷新

总结

上述便是那小说的全体内容了,希望本文的内容对大家的学习或然办事能带来一定的援助,如有疑问大家能够留言沟通,感激我们对帮客之家的支撑。

本文首要给我们介绍了关于webpack中publicPath路线难点的有关内容,分享出去供大家参谋…

前言

深远领悟Webpack 中路线的配备,深入通晓webpack

前言

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()深入通晓Webpack,webpack学习课程之public帕特h路径难点详解。。

除去正规的配备格局,还能在 path 中用利用 [hash] 模板,举例配置:

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

卷入后的目录如下:

必发88 1

此地的 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
配置的实际意义。

public帕特h
设为相对路线,相对路线实际上是争持于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文件夹里。相对路线的好处是本地能够访问,比如有的混合
应用软件 用的file协议,用相对路线明确是可怜的。

publicPath
设为绝对于协议url(//)或http地址(
,开垦意况当然是不可能如此干,使用这么些的场景是将财富托管到CDN,比方集团的静态能源服务器等。

其余publicPath应该以’/’结尾,同偶尔间别的loader或插件的配备不要以’/’起头。

webpack-dev-server

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,本例访问截图如下:

必发88 2

地点的能源得以点击查阅,你会发觉,能源的门径都以/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
    本领访问(

那三个难题也反推出了最有利的配备为:

  • ouput.publicPath 和 webpack-dev-server 的publicPath
    均配置为’/’,vue-cli 就是这种布署
  • template 放在根目录,html-webpack-plugin
    不用修改参数的门路,filename 选择暗中认可值。

总结

当下就对准地点基础路线做了简要的分演说明,如有错误,请不吝提议,后续若开掘其他有关路径配置,再作补充。

好了,以上正是那小说的全体内容了,希望本文的内容对我们的学习也许办事能带来一定的帮扶,如有疑问咱们能够留言沟通,多谢我们对帮客之家的帮助。

中路线的配备,深远驾驭webpack
前言 Webpack第22中学有过多提到路线参数配置,若不知其所以然,很轻便混淆出错。本文尽大概的…

output: {
  filename: "[name].js",
  path:path.resolve(__dirname,"build")
 }

Webpack第22中学有许多关乎路径参数配置,若不知其所以然,很轻巧混淆视听出错。本文尽可能的聚焦了
Webpack2 中涉嫌路径的安插,力争深切浅出。

借使未有一点点名pubicPath,则引进路线如下

context

<body>
 <script src="b.js"></script>
</body>

context 是 webpack
编写翻译时的基本功目录,入口源点(entry)会相对于此目录查找。

只要有钦定publicPath

暗中认可值为当前目录,webpack设置 context
暗中认可值代码 可以本地下载.rar):

output: {
  filename: "[name].js",
  path:path.resolve(__dirname,"build"),
  publicPath:"/assets/"
 }
this.set("context", process.cwd());

则引入如下

process.cwd()即webpack运转所在的目录(等同package.json所在目录)。

<body>
 <script src="assets/b.js"></script>
</body>

context 应该配备为相对路线,假设入口起源为src/main.js,则足以布署:

webpack-dev-server情形下,path、publicPath、差异与交换

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

path:内定编译目录而已(/build/js/),无法用来html中的js引用。

这时候 entry 不能够再铺排为’./src/main.js’,因为 webpack 会相对于 context
配置的 src 目录区查找入口源点(main.js),而 main.js
就在此目录下,所以应该将 entry 配置为当前目录(./)。

publicPath:虚拟目录,自动指向path编写翻译目录(/assets/ =>
/build/js/)。html中援引js文件时,必须引用此虚拟路线(但实在引用的是内部存储器中的公文,既不是/build/js/也不是/assets/)。

context 有怎么着实际功用?官方文书档案的分解是驱动你的安插独立于工程目录
「This makes your configuration independent from CWD (current working
directory)」。怎么明白?举个例子,在送别开拓生产布局文件时候,一般把
webpack.config 放到 build 文件夹下,此时 entry 却绝不思考相对于 build
目录来安顿,还是要绝对于 context 来安插,那也正是所谓的单身于工程目录。

===================================================

急需注意的是,output 的布署项和 context 未有涉嫌,不过有些插件的陈设项和
context 有关,前边会表达。

表露至生产条件:

output

1.webpack展开编写翻译(当然是编写翻译到/build/js/)

output.path

2.把编写翻译目录(/build/js/)下的文本,全体复制到/assets/目录下(注意:不是去修改index.html中引用bundle.js的路子)

打包文件输出的目录,建议配置为相对路线(相对路线不会报错),暗中同意值和
context 的暗许值一样,都是process.cwd()

前边因为publicPath的渠道错误原因,导致webpack-dev-server不可能自动刷新

除开常规的配置格局,仍是能够在 path 中用利用 [hash] 模板,比方配置:

总结

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

以上就是那文章的全部内容了,希望本文的剧情对大家的就学恐怕干活能拉动一定的鼎力相助,如有疑问大家能够留言交换,感激大家对台本之家的支撑。

卷入后的目录如下:

你只怕感兴趣的篇章:

  • Webpack中publicPath路线难点详解
  • Webpack
    path与publicPath的分别详解

必发88 3

此地的 hash 值是编写翻译进程的 hash,假使被打包进去的内容改换了,那么 hash
值也会时有发生转移。这一个能够用于版本回滚。你也足以布置为path.resolve(`./dist/${Date.now()}/`)必发88 ,惠及做持续集成等。

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文件夹里。相对路线的低价是地点能够访问,举个例子有个别混合
应用程式 用的file协议,用相对路线肯定是特别的。

publicPath
设为相对于商业事务url(//)或http地址(
,开荒意况当然是无法那样干,使用这些的现象是将财富托管到CDN,例如集团的静态财富服务器等。

除此以外publicPath应该以’/’结尾,同不经常候其余loader或插件的铺排不要以’/’初步。

webpack-dev-server

publicPath

地点讲过 webpack 的 publicPath,那么这里的 publicPath 和
下边包车型客车public帕特h是还是不是一遍事呢?答案是两岸分别非常大,首先这里的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,本例访问截图如下:

必发88 4

上边的能源能够点击查阅,你会发觉,财富的路径都以/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 配置的 public帕特h
    本领访问(

那五个难点也反推出了最方便的布置为:

  • ouput.publicPath 和 webpack-dev-server 的publicPath
    均配置为’/’,vue-cli 正是这种安排
  • template 放在根目录,html-webpack-plugin
    不用修改参数的门径,filename 接纳暗中认可值。

总结

时下就对准地点基础路线做了差非常少的分阐述明,如有错误,请不吝提出,后续若觉察其余相关路线配置,再作补充。

好了,以上便是那小说的全体内容了,希望本文的开始和结果对大家的学习可能专业能带来一定的帮带,如有疑问大家能够留言交换,感谢大家对剧本之家的支撑。

您恐怕感兴趣的作品:

  • webpack配置的特级实行分享
  • webpack常用配置项配置文件介绍
  • webpack配置文件和常用配置项介绍
  • 依据webpack
    实用配置形式计算

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图