Output（输出）1

Output选项影响到编译的输出。output选项告诉webpack如何把编译后的文件写入磁盘。注意，有可能会有多个entry入口点，但只能定义一个output配置。

如果你在使用任意的哈希（[hash]或[chunkhash]），要确保有个持久2的模块顺序。可以使用OccurrenceOrderPlugin或者recordsPath。

用法

webpack配置里的output属性最低要求是，设置值为一个包含以下两个东西的对象：

  1. 你偏好的编译后文件的filename：// main.js || bundle.js || index.js
  2. output.path是绝对路径，代表打包后你想要放到哪个目录下。

webpack.config.js

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

选项

下面是你可以传递给output属性的值列表：

output. chunkFilename

非入口分块的文件名，是output.path目录里的相对路径。

  • [id]会被分块的id替换。
  • [name]会被分块的名称替换（当分块没有名称时用分块id）。
  • [hash]会被此次编译的哈希替换。
  • [chunkhash]会被这个分块的哈希替换。

output.crossOriginLoading

这个选项能开启分块的跨域加载（cross-origin loading）。

可能的值包括：

  • false：禁用跨域加载。
  • "anonymous"：开启跨域加载。当使用anonymous时，发送请求时不会带上凭证（credentials）。
  • "use-credentials"：开启跨域加载，凭证也会随请求发送。

关于跨域加载的更多信息参阅MDN。

默认值: false 另参阅library 另参阅开发工具

output. devtoolLineToLine

为所有/特定的模块开启行行映射模式。行行映射模式使用一个简单的SourceMap，SourceMap生成的代码每一行都映射到源代码相同的行。这是性能优化。只当你需要更好的性能，而且需要确定输入行对应哪个生成行时使用。

  • true为所有模块开启（不推荐）
  • 一个类似module.loaders的对象{test, include, exclude}，为特定的文件开启。

默认值：false

output.filename

指定磁盘上每个输出文件的名称。你不能指定一个绝对路径给它。output.path才是决定文件在磁盘何处写入的选项。filename仅仅用作命名单个文件。

单个入口

{
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  }
}

// writes to disk: ./build/bundle.js

多个入口

如果你的配置创建超过一个分块（使用多个入口点或者使用如CommonsChunkPlugin的插件），你应当用替换物来确保每个文件有独特的名称。

  • [name]会被分块的名称替换。
  • [hash]会被此次编译的哈希替换。

  • [chunkhash]会被分块的哈希替换。

    {

    entry: {
  app: './src/app.js',
  search: './src/search.js'
},
output: {
  filename: '[name].js',
  path: __dirname + '/build'
}

    }

    // writes to disk: ./build/app.js, ./build/search.js

output. hotUpdateChunkFilename

热替换分块的文件名。它们在output.path目录里面。

  • [id]会被分块的ID替换。
  • [hash]会被此次编译的哈希替换。（存在记录中的最后一个哈希）

默认值："[id].[hash].hot-update.js"

output. hotUpdateFunction

Webpack异步加载热替换分块用的JSONP函数。

默认值："webpackHotUpdate"

output.hotUpdateMainFilename

热替换Main文件的名称。它在output.path目录下。

  • [hash]会被此次编译的哈希替换。（存在记录中的最后一个哈希）

默认值："[hash].hot-update.json"

output.jsonpFunction

Webpack异步加载分块时使用的JSONP方法。

短一点的函数可能会减小点文件大小。如果单个页面里面使用了多个webpack实例，要使用不同的identifier。

默认值："webpackJsonp"

output.library

如果设置了，导出bundle为一个库。output.library是其名称。

如果你在写一个库，想发布它为单个文件时使用这个设置。

output.libraryTarget

以何种方式导出库：

  • "var"——通过设置一个变量导出：var Library = xxx（默认）
  • "this"——通过设置this的一个属性导出：this["Library"] = xxx
  • "commonjs"——通过设置exports的一个属性导出：exports["Library"] = xxx
  • "commonjs2"——通过设置module.exports导出：module.exports = xxx
  • "amd"——导出到AMD（可选命名——通过library选项设置名称）
  • "umd"——导出到AMD, CommonJS2或者root的属性

默认值："var"

如果没有设置output.library，但output.libraryTarget设置是var之外的值，导出对象的每个属性都会被复制（除开amd，commonjs2和umd）。

output.path

作为绝对路径的输出目录（必须）。

  • [hash]会被此次编译的哈希替换。

output.publicPath

publicPath指定了浏览器引用输出文件时的公开地址。对于嵌入<script>或<link>标签或引用资源如图片的loaders来说，当href或url()指向文件和他们在磁盘中的位置（通过path指定的）不一样时，publicPath会被使用。当你想在一个不同域名抑或CDN下存放部分/全部输出文件时，这个会非常有用。此外，Webpack Dev Server也使用它来决定输出文件应当从何处提供的路径。与path一起，你可以用[hash]替换物实现更好的缓存策略。3

config.js

output: {
    path: "/home/proj/public/assets",
    publicPath: "/assets/"
}

index.html

<head>
  <link href="/assets/spinner.gif"/>
</head>

下面是一个复杂点的例子，使用CDN和资源哈希。

config.js

output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

注意：万一输出文件的最终publicPath在编译的时候还未知，publicPath可以留空，在入口点文件运行时再动态进行设置。如果你在编译时不知道publicPath，你可以忽略并在入口点设置__webpack_public_path__。

 __webpack_public_path__ = myRuntimePublicPath

// rest of your application entry

output. sourceMapFilename

设置JavaScript文件的SourceMap文件名。它们在output.path目录中。

  • [file]会被JavaScript文件的名称替换。
  • [id]会被分块的id替换。
  • [hash]会被此次编译的哈希替换。

默认值："[file].map"

1. https://webpack.js.org/concepts/output/ ↩
2. consistent，指在多次编译过程中保持一致。 ↩
3. 本段内容来自http://webpack.github.io/docs/configuration.html#output-publicpath ↩

results matching ""

    No results matching ""