Output

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2022-07-07

Output

output 配置如何输出最终想要的代码。

filename

配置输出文件的名称，为 string 类型。如果只有一个输出文件，则 可以将它写成静态不变的:

module.exports = {
  output: {
    filename: 'bundle.js'
  }
}

但是在有多个Chunk要输出时，就需要借助模板和变量了。前面讲到， Webpack会为每个Chunk取一个名称，所以我们可以根据 Chunk 的名称来区分输出的文件名。

module.exports = {
  output: {
    filename: '[name].js'
  }
}

变量

  • id: Chunk 的唯一标识，从 0开始
  • name: Chunk 的名称
  • hash: Chunk的唯一标识的 Hash值
  • chunkhash: Chunk 内容的 Hash 值

hash 和 chunkhash的长度是可指定的，[hash:8]代表8位hash值，默认是20位。

ExtractTextWebpackPlugin插件使用 contenthash而不是 chunkhash 来代表哈希值，原因在于 ExtractTextWebpackPlugin提取出来的内容是代码内容本身，而不是由一组模块组成的Chunk

chunkFilename

chunkFilename 配置无入口的 Chunk 在输出时的文件名称（被抽取的公共chunk等） 。chunkFilename 和上面的 filename 非常类似，但 chunkFilename 只用于指定在运行过程中生成的 Chunk 在输出时的文件名称。

会在运行时生成 Chunk 的常见场景包括：使用 CommonChunkPlugin、使用import ('path/to/module')动态加载等。 chunkFilename支持和 filename一致的内置变量。

path

path 配置输出文件存放在本地的目录，必须是 string 类型的绝对路径。通常通过 Node.js 的 path 模块去获取绝对路径 :

module.exports = {
  output: {
    path: path.resolve(__dirname, './dist'),
  }
}

publicPath

publicPath 配置发布到线上资源的 URL前缀，为 string 类型。默认值 是空字符串，即使用相对路径。

举个例子，需要将构建出的资源文件上传到 CDN 服务上，以利于 加快页面的打开速度。

module.exports = {
  output: {
    filename: '[name][chunkhash:8] .js',
    publicPath: 'https://cdn.example.com/assets/'
  }
}

之后的页面引入就会是

<script src='https://cdn.example.com/assets/a_12345678.js' ></script>

url-loader 的 publicPath

本地文件目录结构

├── style
│    └── main.css 
├── src
│    └── static
│      └── images
│        └── a.png
│    └── page 
│      └─── main.html 
└── package.json

你在'main.css' 中使用了 "background:url('../src/static/images/a.png')"，设置了css文件的filename 为 'static/css/[name].[hash:4].css'，设置url-loader转换之后图片的name格式是 '[path][name].[hash:4].[ext]'

打包之后

├── dist
│    └── static
│     └── images
│       └── a.c3b4.png
│     └── css 
│       └─── main.12bc.css

如果不设url-loader配置的publicPath，哪么 main.css 引入的路径将会是'static/css/static/images/a.c3b4.png' 。会从当前路径下去找被url-loader转化过的路径'static/images/a.c3b4.png'，所以需要设置url-loader的publicPath为'../../' 这样才会去找'static/images/a.c3b4.png'

crossOriginloading

Webpack 输出的部分代码块可能需要异步加载，而异步加载是通过 JSONP。crossOriginLoading 则是用于 配置这个异步插入的标签的 crossorigin值。

script标签的 crossorigin 属性可以取以下值:

anonymous： 对此元素的CORS（跨域）请求将不设置凭据标志cookies。
use-credentials： 对此元素的CORS（跨域）请求将设置凭证标志; 这意味着请求将提供凭据cookies。