深入理解Webpack 中路径的配置


Posted in Javascript onJune 17, 2017

前言

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'
}

打包后的目录如下:

深入理解Webpack 中路径的配置

这里的 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

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

深入理解Webpack 中路径的配置

上面的资源可以点击查看,你会发现,资源的路径都是/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 采用默认值。

总结

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

好了,以上就是这文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
DOM 高级编程
May 06 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
详解Vue组件之间的数据通信实例
Jun 17 #Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 #Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 #Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 #Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 #Javascript
js简易版购物车功能
Jun 17 #Javascript
Webpack如何引入bootstrap的方法
Jun 17 #Javascript
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
php实现生成验证码实例分享
2016/04/10 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
Three.js基础学习教程
2017/11/16 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
python traceback捕获并打印异常的方法
2018/08/31 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
Python通过文本和图片生成词云图
2020/05/21 Python
怎么快速自学python
2020/06/22 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
致跳远运动员加油稿
2014/02/11 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
领导班子整改措施
2014/10/24 职场文书
质量保证书
2015/01/17 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
CentOS安装Nginx并部署vue
2022/04/12 Servers
python playwrigh框架入门安装使用
2022/07/23 Python