深入理解Webpackwww.js8331.com

多年来温馨在搭建三个基于webpack的react项目,碰到关于output.publicPath和webpack-dev-server中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()

除此之外常规的配置方式,还能够在 path 中用利用 [hash]www.js8331.com, 模板,比方配置:

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

打包后的目录如下:

www.js8331.com 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
配置的实际意义。

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 和
上边的publicPath是还是不是三次事呢?答案是两岸分别相当大,首先这里的public帕特h用于支付情况的,因而不会出现构造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,本例访谈截图如下:

www.js8331.com 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
前言 Webpack2中有成都百货上千关乎路线参数配置,若不知其可以然,相当的轻巧混淆出错。本文尽可能的…

output

output选项钦命webpack输出的职分,个中很首要的也是平时使用的有 path 和
publicPath

output.path

默认值: process.cwd()

output.path 只是提醒输出的目录,对应二个 相对路线,比方在项目中日常会做如下配置:

output: { path: path.resolve,}

output.publicPath

法定文书档案中对public帕特h的疏解 是

webpack
提供三个特别管用的安顿,该配置能扶持您为品种中的全体财富钦定一个功底路线,它被誉为公共路线。

而有关什么行使该路径并从未说清楚…

实在此说的持有能源的功底路线是指项目中援用css,js,img等财富时候的一个根底路线,那一个功底路线要同盟具体能源中钦点的门路使用,所以实际打包后能源的走访路径能够用如下公式表示:

静态能源最终访谈路径 = output.publicPath + 资源loader或插件等铺排路线

output.publicPath = '/dist/'// imageoptions: { name: 'img/[name].[ext]?[hash]'}// 最终图片的访问路径为output.publicPath + 'img/[name].[ext]?[hash]' = '/dist/img/[name].[ext]?[hash]'// js output.filenameoutput: { filename: '[name].js'}// 最终js的访问路径为output.publicPath + '[name].js' = '/dist/[name].js'// extract-text-webpack-plugin cssnew ExtractTextPlugin({ filename: 'style.[chunkhash].css'})// 最终css的访问路径为output.publicPath + 'style.[chunkhash].css' = '/dist/style.[chunkhash].css'

以此最终静态能源访谈路线在接受html-webpack-plugin打包后拿走的html中得以阅览。所以
publicPath
设置成相对路线后,相对路线是相对于build之后的index.html的,举个例子,倘使设置
publicPath: ‘./dist/’ ,则打包后js的援引路线为 ./dist/main.js
,可是此间有二个主题素材,相对路线在拜候本地时能够,不过只要将静态财富托管到CDN上则做客路线显明无法动用相对路线,可是借使将
publicPath 设置成 / ,则打包后拜候路线为 localhost:8080/dist/main.js
,当地无法访问

之所以这里须要在上线时候手动校订 publicPath
,感到不是很有益,不过不明白该怎么减轻…

貌似景色下
publicPath应该以’/’结尾,而此外loader或插件的布署不要以’/’最早

webpack-dev-server中的publicPath

点击查看官方文书档案中有关devServer.public帕特h的牵线

在开荒阶段,大家借用devServer运营三个支出服务器实行开垦,这里也会布置贰个publicPath ,这里的 publicPath
路线下的打包文件能够在浏览器中拜谒。而静态能源依旧选用 output.publicPath

webpack-dev-server打包的从头到尾的经过是放在内存中的,这几个包裹后的能源对外的的根目录正是publicPath ,换句话说,这里大家设置的是包装后财富寄存的职分

// 假设devServer的publicPath为const publicPath = '/dist/'// 则启动devServer后index.html的位置为const htmlPath = `${pablicPath}index.html`// 包的位置cosnt mainJsPath = `${pablicPath}main.js`

上述可以直接通过 访问到。

通过拜见
能够拿走devServer运营后的财富访谈路线,如图所示,点击静态财富可以看出静态能源的拜望路线为

html-webpack-plugin

这一个插件用于将css和js增添到html模版中,在那之中 template 和 filename
会受到路线的熏陶,从源码中可以看到

template

功效:用于定义模版文件的路线

复制代码 代码如下:this.options.template =
this.getFullTemplatePath(this.options.template, compiler.context卡塔尔国;

所以 template 独有定义在webpack的 context 下才会被识别, webpack
context的暗中认可值为 process.cwd(卡塔尔 ,既运营 node
命令时所在的文本夹的相对路径

filename

功能:输出的HTML文件名,默以为index.html,能够直接配置带有子目录

复制代码 代码如下:this.options.filename =
path.relative(compiler.options.output.path, filename卡塔尔国;

由此filename的门道是周旋于 output.path
的,而在webpack-dev-server中,则是周旋于webpack-dev-server配置的
publicPath 。

比方webpack-dev-server的 public帕特h 和 output.publicPath
区别样,在选拔html-webpack-plugin只怕会变成援引静态能源败北,因为在devServer中依然以
output.publicPath
援引静态财富,和webpack-dev-server的提供的能源访问路线分裂等,进而不可能平常访问。

有一种情况除了,正是 output.publicPath
是相对路线,此时能够访谈本地财富

之所以平日意况下都要确定保证devServer中的 publicPath 与 output.publicPath
保持一致。

最后

有关webpack中的 path
就总计这么多,在切磋有关webpack路线的进度中看查到的片段关于路线的冗杂的知识如下:

配置中/代表url根路径,例如

devServer.publicPath & devServer.contentBase

devServer.contentBase
告诉服务器从哪儿提供内容。只有在您想要提供静态文件时才须要。
devServer.public帕特h 将用于明确相应从何地提供 bundle,何况此选项优先。

node中的路线

__dirname: 总是回到被实践的 js 所在文件夹的绝对路线 __filename:
总是回到被实行的 js 的相对路线 process.cwd(卡塔尔国: 总是回到运维 node
命令时所在的文本夹的相对路线

参考

详整Webpack2的那二个路线 webpack 公共路径devServer.publicPath浅析 NodeJs
的两种文件路线

以上正是本文的全体内容,希望对我们的读书抱有利于,也期望我们多多关照脚本之家。

发表评论

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