Webpack 出口output

本节主要讲解Webpack的资源出口output,内容与上一节Webpack入口entry是相关联的。

在之前的Webpack快速入门一节,我们也简单使用过资源出口,我们的配置文件如下

  var path = require('path');  

  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, ''),
      filename: 'bundle.js'
    },
    mode: 'none'
  };

其中output就是资源出口配置项。output是一个对象,它有几个重要的属性filename、path、publicPath和chunkFilename。

一、Webpack的output.filename

filename是打包后生成的资源名称,在快速入门一节,我们生成的是bundle.js。根据你自己的需要,把bundle.js改成my.js或index.js等都可以。

filename除了可以是一个文件名称,也可以是相对地址,例如'./js/bundle.js'。

最终打包输出的文件是path绝对路径与filename的拼接后的地址。

filename支持类似变量的方式生成动态文件名,例如[hash]-bundle.js,其中方括号很像占位符,hash表示特定的动态值。

我们来看一个例子,除了把filename由bundle.js改成了[hash].js,其余配置与快速入门一节一样。

配套代码是github仓库 https://github.com/jruit/webpack-tutorial 的webpack2-2。

  var path = require('path');  

  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, ''),
      filename: '[hash].js'
    },
    mode: 'none'
  };

我们执行npx webpack打包,控制台显示如下。

Webpack资源出口output Webpack教程 姜瑞涛的官方网站

eaf163aa8342f012d6ee表示本次打包的hash值,因此生成的文件名就是eaf163aa8342f012d6ee.js。

特定动态值除了[hash],还有[name]。

[name]表示的是chunk的名称,chunk这个概念可以单独写一节,简单理解的话就是打包过程中,一个资源入口代表一个chunk,一个异步模块资源也代表一个chunk。

本节讲的是Webpack资源出口,这里的chunk与资源入口有关。

Webpack 入口entry一节,讲了几种形式的资源入口entry。

其中字符串和数组形式的entry,output.filename的[name]值都是main。

对于entry是对象形式的多入口配置,[name]是对象的属性名,对应每一个入口文件。

字符串形式的例子,配套github仓库 https://github.com/jruit/webpack-tutorial 的webpack2-3,对象形式的是webpack2-4。

webpack2-3的配置文件如下,执行npx webpack后,控制台显示打包结果如下图

  const path = require('path');

  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, ''),
      filename: '[name].js'
    },
    mode: 'none'
  };
output.filename Webpack教程 姜瑞涛的官方网站

webpack2-4的配置文件如下,执行npx webpack后,控制台显示打包结果如下图

  const path = require('path');

  module.exports = {
    entry: {
      app1: './a.js',
      app2: './f.js',
    },
    output: {
      path: path.resolve(__dirname, ''),
      filename: '[name].js'
    },
    mode: 'none'
  };
output.filename多入口 Webpack教程 姜瑞涛的官方网站

特定动态值还有[hash]、[chunkhash]和[contenthash]等,我们在下一节hash、chunkhash和contenthash区别对有关hash的内容进行讲解。

二、Webpack的output.path

path表示资源打包后输出的位置,该位置地址要是绝对路径。如果你不设置它,webpack4默认为dist目录。

需要注意的是,path输出路径表示的是在磁盘上构建生成的真实文件存放地址。我们在开发时,一般会用webpack-dev-server开启一个本地服务器,这个服务器可以自动刷新和热加载等,它生成的文件是在内存中而不是在电脑磁盘。该内存中的文件路径,我们会用Webpack配置文件的devServer配置项的publicPath表示,它虚拟映射了电脑磁盘路径。

devServer中publicPath的使用会在之后章节讲解,我们现在重点掌握output。

三、Webpack的output.publicPath

output中的publicPath表示的是资源访问路径。

注意这个publicPath指的是output的,和devServer的不一样。

资源访问路径publicPath与资源输出位置path很容易搞混,这里讲一下他俩的区别。

资源输出位置表示的是本次打包完成后,资源存放的磁盘位置。

资源存放到磁盘了,浏览器如何知道该资源存放在什么位置呢?

这个时候需要我们指定该资源的访问路径,这个访问路径就是用output.publicPath来表示的。

output.publicPath的表示形式有两大类:相对路径与绝对路径。

我们都以当前浏览的页面url是 https://www.apple.com/ipad/ ,要访问的资源名称是bundle-3fa2.js为例讲解。

1.相对路径

相对路径又可以分类两种情况,第一种,它相对于当前浏览的HTML页面路径取值的。

(1) output.publicPath以"./"或"../"等开头,表示要访问的资源以当前页面url作为基础路径。

  publicPath: ""  // 资源的访问地址是https://www.apple.com/ipad/bundle-3fa2.js

  publicPath: "../dist/"  // 资源的访问地址是https://www.apple.com/dist/bundle-3fa2.js

  publicPath: "./dist/"  // 资源的访问地址是https://www.apple.com/ipad/dist/bundle-3fa2.js

(2) output.publicPath以"/"开头,表示要访问的资源以当前页面的服务器地址作为基础路径。

  publicPath: "/"  // 资源的访问地址是https://www.apple.com/bundle-3fa2.js。

  publicPath: "/dist/"  // 资源的访问地址是https://www.apple.com/dist/bundle-3fa2.js。

2.绝对路径

output.publicPath的值以HTTP协议名称开始。一般在使用CDN的时候,因为CDN的域名与我们自己服务器的域名不一样,我们会采用这种方式。

Web中常见的协议名称有http和https,例如我的网站 https://www.jiangruitao.com/ 的协议名称就是https。

还有一种叫做相对协议的形式,它以 // 开头,也就是省略了前面的https:或http:。

在使用相对协议的时候,浏览器会对前页面使用的协议名称与相对协议拼接。

下面看一下output.publicPath的值以协议开始的例子,在以协议开始的publicPath时,资源的访问地址是publicPath代表的绝对路径加上资源名称。

  publicPath: "https://cdn.apple.net/"  // 资源的访问地址是https://cdn.apple.net/bundle-3fa2.js

  publicPath: "http://cdn.apple.net/"  // 资源的访问地址是http://cdn.apple.net/bundle-3fa2.js

  publicPath: "//cdn.apple.net/dist/"  // 资源的访问地址是https://cdn.apple.net/dist/bundle-3fa2.js

四、Webpack的output.chunkFilename

chunkFilename也是用来表示打包后生成的文件名,那它和filename有什么区别呢?

它表示的是打包过程中非入口文件的chunk名称,通常在使用异步模块的时候,会生成非入口文件的chunk。

关于异步模块的知识,可以参考https://www.jiangruitao.com/webpack/import-require/一节。

小结

本节主要讲了Webpack的出口output配置项的filename、path、publicPath和chunkFilename。

Webpack的出口配置是要结合入口配置进行的。公司级项目的配置,需要对Webpack模块和Web缓存等知识有一定的了解,本节对部分涉及到的知识给出了链接。

如果有些概念暂时无法理解也是正常的,毕竟Webpack的复杂都催生出了Webpack配置工程师这个职位。

我的建议是循序渐进,先不要考虑发布到线上的问题,那么这四个参数就可以删除publicPath。如果对异步模块不理解,那么就暂时不使用chunkFilename。

去掉了两个参数了,那么就对output的filename和path这两个参数进行深入学习。

等这两个参数搞明白了,再接着学去掉的两个参数以及涉及到的知识。

笔记与思考

发表评论

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