[译]webpack官网文档 :概念 -- 3.输出

原创翻译,转载请注明出处。

原文地址:https://webpack.js.org/concepts/output/

 

选项会影响编译的输出。Output的选项告诉webpack怎样把编译后的文件写入硬盘。注意,可能会有多个入口点,但是能有一个output配置。

如果使用hashing([hash]或[chunkhash]),需要确保模块的顺序保持不变。可以用OccurrenceOrderPlugin或者recordsPath。

 

用法

Webpack配置文件里output属性的最低要求是给一个对象设定值。它包含两个东西:你想要的编译后的文件名(filename),和一个output.path,是一个绝对路径,放打包后文件的地方。

 

webpack.config.js

 

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

选项

下面是可以传递给output属性的值得列表。

 

output.chunkFilename

非入口(non-entry)代码块的文件名,在output.path目录下的一个关联路径(/文件名)

  • [id]将会被代码块的id替换
  • [name]将会被代码块的名称替换(或者是当代码块没有名字的时候被id替换)
  • [hash]被编译的哈希值替换
  • [chunkhash]被代码块的哈希值替换

(译者注:配合实现异步加载,把需要异步加载的部分打包到一个独立的文件)

 

output.crossOriginLoading

允许跨域加载代码块的选项

  • false – 不能跨域加载
  • “anonymous” – 可以跨域加载。加载请求里不会传送证书。
  • “use-credentials” – 可以跨域加载,且加载请求里将会传送证书。

output.devtoolLineToLine

使全部或者指定模块使用行到行(line-to-line)映射模式。Line-to-line映射模式使用了一个简单的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

定义热更新(Hot Update)代码块的文件名。它们被放在output.path目录里。

  • [id]将会被代码块的id替换
  • [hash]将会被编译的哈希值替换(记录里保存的最后一个哈希值)

默认是:”[id].[hash].hot-update.js”

 

output.hotUpdateFunction

一个JSONP函数,在webpack里被用于对热更新(hot update)代码块的异步加载。

默认:”webpackHotUpdate”

 

output.hotUpdateMainFilename

热更新(Hot Update)的主文件名。它们被放在output.path目录里。

  • [hash]:将被编译的哈希值替换(记录里保存的最后一个哈希值)

默认:”[hash].out-update.json”

 

output.jsonpFunction

一个JSONP函数,在webpack里被用于代码块的异步加载。

函数简短一点,相对应文件的大小也会小一点。在一个单页应用里有多个webpack实例的时候,需要有不同的标识符。

默认:”webpackJsonp”

 

output.library

如果被设定,输出的包就是库。output.library是它的名字。

如果你正在写一个库,并且想以单独文件发布的时候使用它。

 

output.libraryTarget

定义输出库的格式

  • “var” – 通过设定一个变量导出:var Library = XXX(默认)
  • “this” – 通过设定this属性导出:this:this[“Library”] = xxx
  • “commonjs” – 通过设定exports属性导出:exports: exportsp[“Library”] = xxx
  • “commonjs2” – 通过设定module.exports导出:module.exports = xxx
  • “amd” – 导出到AMD(随意命名– 通过库的选项设定名字)
  • “umd” – 导出到AMD,CommonJS2或者作为根的一个属性

默认:”var”

如果output.library没有设定,output.libraryTarget被设定为var以外的值,每一个导出属性都会被拷贝(除了amd,commonjs2和umd)。

 

output.path

输出的目录,是绝对路径(必须)

  • [hash]将会被编译的哈希值替换

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时,可以先忽略它,在入口点设定__webpack_public_path__

 

__webpack_public_path__ = myRuntimePublicPath
 
// rest of your application entry

output.sourceMapFilename

为Javascript文件而生成的SourceMaps的文件名。它们被放在output.path目录里。

  • [file]将会被JavaScript文件名替换
  • [id]将会被代码块的id替换
  • [hash]将会被编译的哈希值替换

 默认:”[file].map”

-- End --

相关推荐