深深精晓Webpack 中路线的配置,深刻掌握webpack

前言

Webpack第22中学有为数相当的多涉嫌路线参数配置,若不知其所以然,很轻松混淆视听出错。本文尽大概的聚集了
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'
}

卷入后的目录如下:

图片 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'

public帕特h 暗中认可值为空字符串,接下去看别的各个大范围的 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地址(
,开采景况当然是不可能如此干,使用这几个的景色是将财富托管到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,本例访谈截图如下:

图片 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中有相当多事关路线参数配置,若不知其所以然,很轻易模糊出错。本文尽或然的…

在 webpack-dev-server 中,则相对于 webpack-dev-server 配置的
public帕特h。

于是filename的门径是绝对于 output.path
的,而在webpack-dev-server中,则是绝对于webpack-dev-server配置的
publicPath 。

newhtmlWebpackPlugin({

html-webpack-plugin

举例webpack-dev-server的 public帕特h 和 output.publicPath
不等同,在运用html-webpack-plugin大概会招致援用静态能源退步,因为在devServer中仍旧以
output.public帕特h
引用静态能源,和webpack-dev-server的提供的能源访谈路线不雷同,进而无法平常访谈。

main:’./src/script/main.js’,

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

filename

Webpack打包css文件时会报错,因为它自身不带要css loader,所以要先下载

除了常规的配置形式,还是能够在 path 中用利用 [hash] 模板,比如配置:

node中的路线

图片 3

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

output.path

a: ‘.src/script/a.js’

output

故此 template 唯有定义在webpack的 context 下才会被识别, webpack
context的私下认可值为 process.cwd() ,既运转 node
命令时所在的文书夹的相对路线

module:{

output: {
 path: path.resolve('./dist/[hash:8]/'),
 filename: '[name].js'
}
// 假设devServer的publicPath为
const publicPath = '/dist/'
// 则启动devServer后index.html的位置为
const htmlPath = `${pablicPath}index.html`
// 包的位置
cosnt mainJsPath = `${pablicPath}main.js`

template: ‘index.html’,

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

在开垦阶段,大家借用devServer运转三个支付服务器进行开垦,这里也会配备叁个publicPath ,这里的 publicPath
路线下的打包文件能够在浏览器中拜访。而静态能源依旧选用 output.publicPath

}

publicPath

详解Webpack2的那个路线
webpack 公共路线(Public
Path)
devServer.publicPath
浅析 NodeJs
的两种文件路线

cd workspaces

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

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

main: ’.src/script/main.js’,

ouput.publicPath

经过访问
能够得到devServer运维后的财富访谈路线,如图所示,点击静态财富能够看看静态能源的访问路径为

output: {

前言

以此插件用于将css和js增添到html模版中,个中 template 和 filename
会受到路线的熏陶,从源码中能够见到

代码分割(code splitting):只去加载当前只需加载的文书,即按需加载

记得最开端攻读 Webpack 的时候,一贯没把 publi帕特h
通晓彻底,乃至还失实的感到它和
output.path有涉及。那个布局项在重重情景是那多少个重要的,如若不深刻明白,就照猫画虎。

参考

    webpack引进能源的不二等秘书籍相当粗略,如图片、css文件,和common
js规范引入其他js文件的法子同样,使用require指令,common
js标准规定种种文件正是三个单身的模块,每一种模块是四个独门的成效域。

context

output.publicPath = '/dist/'

// image
options: {
 name: 'img/[name].[ext]?[hash]'
}

// 最终图片的访问路径为
output.publicPath + 'img/[name].[ext]?[hash]' = '/dist/img/[name].[ext]?[hash]'

// js output.filename
output: {
 filename: '[name].js'
}
// 最终js的访问路径为
output.publicPath + '[name].js' = '/dist/[name].js'

// extract-text-webpack-plugin css
new ExtractTextPlugin({
 filename: 'style.[chunkhash].css'
})
// 最终css的访问路径为
output.publicPath + 'style.[chunkhash].css' = '/dist/style.[chunkhash].css'

minify:{

图片 4

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

inject:’body’,

静态能源最后访谈路线 = output.publicPath +
能源loader或插件等布署路线

例如:

filename:’a.html’,

filename的路子是相对于 output.path,源码如下:

以上正是本文的全体内容,希望对大家的上学抱有支持,也希望大家多多帮忙脚本之家。

在webpack加参数时与parse.json结合使用,然后npm run webpack

那边的 hash 值是编写翻译进程的 hash,假使被打包进去的内容改造了,那么 hash
值也会时有产生转移。这一个能够用于版本回滚。你也得以安排为path.resolve(`./dist/${Date.now()}/`)方便做持续集成等。

源码:

}

比方表达:

webpack-dev-server中的publicPath

在webpack.config.js文件中的对象新扩张一个插件属性:

context 应该配备为绝对路线,假设入口源点为src/main.js,则能够配备:

webpack
提供贰个十分管用的安顿,该配置能帮助你为项目中的全体财富钦赐八个基础路线,它被称呼公共路线(publicPath)。

inject:’head’,

  • 机动援引的门路照旧以 ouput.publicPath 为准,和 webpack-dev-server
    提供的能源访问路线不等同,进而不可能健康访谈;
  • 浏览 index.html 须求增添 webpack-dev-server 配置的 publicPath
    才干访谈(

output.publicPath

entry:{

怎么着查看 webpack-dev-server
全体运行后的财富访谈路线呢?有个简易的措施,正是探问/webpack-dev-server,本例访谈截图如下:

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

Cd webpack-test

大家领略 webpack-dev-server
打包的内容是位于内部存款和储蓄器中,通过express相称必要路线,然后读取对应的财富输出。这一个能源对外的根目录正是public帕特h,可以领略为和
outpu.path
的功能雷同,将全数财富放在此目录下,在浏览器能够从来访问此目录下的财富。

  1. __dirname: 总是回到被实施的 js 所在文书夹的相对路线
  2. __filename: 总是回到被施行的 js 的相对路线
  3. process.cwd(): 总是回到运转 node 命令时所在的文件夹的相对路线

}),

其一插件的几处配置受路线配置影响,因而要求非常求证下。

webpack-dev-server打包的故事情节是坐落内部存款和储蓄器中的,那几个包裹后的财富对外的的根目录就是publicPath ,换句话说,这里大家设置的是包裹后财富存放的岗位

moudle.exports=App;

若 webpack-dev-server 中的 publicPath 和 ouput.publicPath
区别,在这种布局下利用html-webpack-plugin是有如下难题:

其实这里说的有着财富的功底路线是指项目中援用css,js,img等财富时候的三个基础路线,这一个基础路线要同盟具体能源中钦点的不二诀窍使用,所以实际打包后财富的看望路线能够用如下公式表示:

removeComments:true,

包裹文件输出的目录,提出配置为相对路线(相对路线不会报错),暗中认可值和
context 的私下认可值同样,都以process.cwd()

官方文书档案中对publicPath的表明是

//模板template为根目录下的index.html

webpack-dev-server

复制代码 代码如下:

require(‘html-webpack-plugin’);//引进插件,先得设置

您恐怕感兴趣的稿子:

  • webpack配置的超级实行分享
  • webpack常用配置项配置文件介绍
  • webpack配置文件和常用配置项介绍
  • 基于webpack
    实用配置情势总括

devServer.publicPath & devServer.contentBase

Webpack插件

近期就对准地点基础路线做了简易的分解表达,如有错误,请不吝提议,后续若发掘任何相关路径配置,再作补充。

例如

presets:[‘latest’]//设置babel转译时利用新型版本,即es5,es6,

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

静态财富最后访问路线 = output.publicPath + 财富loader或插件等配置路径

entry: ’.src/script/main.js’,