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打包，控制台显示如下。

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

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

特定动态值还有[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这两个参数进行深入学习。

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