Output

output  配置如何输出最终想要的代码。 output  是一个  object ,里面包含一系列配置项,下面分别介绍它们。

filename

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

filename: 'bundle.js'

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

filename: '[name].js'

代码里的  [name]  代表用内置的  name  变量去替换 [name] ,这时你可以把它看作一个字符串模块函数, 每个要输出的 Chunk 都会通过这个函数去拼接出输出的文件名称。

内置变量除了 name 还包括:

变量名 含义
id Chunk 的唯一标识,从0开始
name Chunk 的名称
hash Chunk 的唯一标识的 Hash 值
chunkhash Chunk 内容的 Hash 值

其中  hash  和  chunkhash  的长度是可指定的, [hash:8]  代表取8位 Hash 值,默认是20位。

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

chunkFilename

output.chunkFilename  配置无入口的 Chunk 在输出时的文件名称。 chunkFilename 和上面的 filename 非常类似,但 chunkFilename 只用于指定在运行过程中生成的 Chunk 在输出时的文件名称。 常见的会在运行时生成 Chunk 场景有在使用 CommonChunkPlugin、使用 import('path/to/module') 动态加载等时。 chunkFilename 支持和 filename 一致的内置变量。

path

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

path: path.resolve(__dirname, 'dist_[hash]')

publicPath

在复杂的项目里可能会有一些构建出的资源需要异步加载,加载这些异步资源需要对应的 URL 地址。

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

这样说可能有点抽象,举个例子,需要把构建出的资源文件上传到 CDN 服务上,以利于加快页面的打开速度。配置代码如下:

filename:'[name]_[chunkhash:8].js'
publicPath: 'https://cdn.example.com/assets/'

这时发布到线上的 HTML 在引入 JavaScript 文件时就需要:

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

使用该配置项时要小心,稍有不慎将导致资源加载404错误。

output.path 和 output.publicPath 都支持字符串模版,内置变量只有一个:hash 代表一次编译操作的 Hash 值。

crossOriginLoading

Webpack 输出的部分代码块可能需要异步加载,而异步加载是通过 JSONP 方式实现的。 JSONP 的原理是动态地向 HTML 中插入一个 <script src="url"></script> 标签去加载异步资源。output.crossOriginLoading 则是用于配置这个异步插入的标签的 crossorigin 值。

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

  • anonymous(默认) 在加载此脚本资源时不会带上用户的 Cookies;
  • use-credentials 在加载此脚本资源时会带上用户的 Cookies。

通常用设置 crossorigin 来获取异步加载的脚本执行时的详细错误信息。

libraryTarget 和 library

当用 Webpack 去构建一个可以被其他模块导入使用的库时需要用到它们。

  • output.libraryTarget 配置以何种方式导出库。
  • output.library 配置导出库的名称。

它们通常搭配在一起使用。

output.libraryTarget 是字符串的枚举类型,支持以下配置。

var (默认)

编写的库将通过 var 被赋值给通过 library 指定名称的变量。

假如配置了 output.library='LibraryName',则输出和使用的代码如下:

// Webpack 输出的代码
var LibraryName = lib_code; // 使用库的方法
LibraryName.doSomething();

假如 output.library 为空,则将直接输出:

lib_code

其中 lib_code 代指导出库的代码内容,是有返回值的一个自执行函数。

commonjs

编写的库将通过 CommonJS 规范导出。

假如配置了 output.library='LibraryName',则输出和使用的代码如下:

// Webpack 输出的代码
exports['LibraryName'] = lib_code; // 使用库的方法
require('library-name-in-npm')['LibraryName'].doSomething();
其中 library-name-in-npm 是指模块发布到 Npm 代码仓库时的名称。

commonjs2

编写的库将通过 CommonJS2 规范导出,输出和使用的代码如下:

// Webpack 输出的代码
module.exports = lib_code; // 使用库的方法
require('library-name-in-npm').doSomething();

CommonJS2 和 CommonJS 规范很相似,差别在于 CommonJS 只能用 exports 导出,而 CommonJS2 在 CommonJS 的基础上增加了 module.exports 的导出方式。

在 output.libraryTarget 为 commonjs2 时,配置 output.library 将没有意义。

this

编写的库将通过 this 被赋值给通过 library 指定的名称,输出和使用的代码如下:

// Webpack 输出的代码
this['LibraryName'] = lib_code; // 使用库的方法
this.LibraryName.doSomething();

window

编写的库将通过 window 被赋值给通过 library 指定的名称,即把库挂载到 window 上,输出和使用的代码如下:

// Webpack 输出的代码
window['LibraryName'] = lib_code; // 使用库的方法
window.LibraryName.doSomething();

global

编写的库将通过 global 被赋值给通过 library 指定的名称,即把库挂载到 global 上,输出和使用的代码如下:

// Webpack 输出的代码
global['LibraryName'] = lib_code; // 使用库的方法
global.LibraryName.doSomething();

libraryExport

output.libraryExport 配置要导出的模块中哪些子模块需要被导出。 它只有在 output.libraryTarget 被设置成 commonjs 或者 commonjs2 时使用才有意义。

假如要导出的模块源代码是:

export const a=1;
export default b=2;

现在你想让构建输出的代码只导出其中的 a,可以把 output.libraryExport 设置成 a,那么构建输出的代码和使用方法将变成如下:

// Webpack 输出的代码
module.exports = lib_code['a']; // 使用库的方法
require('library-name-in-npm')===1;

以上只是 output 里常用的配置项,还有部分几乎用不上的配置项没有一一列举,你可以在 Webpack 官方文档 上查阅它们。

webpack学习笔记--配置output的更多相关文章

  1. webpack学习笔记--配置总结

    从前面的配置看来选项很多,Webpack 内置了很多功能. 你不必都记住它们,只需要大概明白 Webpack 原理和核心概念去判断选项大致属于哪个大模块下,再去查详细的使用文档. 通常你可用如下经验去 ...

  2. webpack学习笔记--配置entry

     Entry entry 是配置模块的入口,可抽象成输入,Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块. entry  配置是必填的,若不填则将导致 Webpack ...

  3. webpack学习笔记--配置devServer

    devServer 1-6 使用DevServer 介绍过用来提高开发效率的 DevServer ,它提供了一些配置项可以改变 DevServer 的默认行为. 要配置 DevServer ,除了在配 ...

  4. webpack学习笔记--配置plugins

     Plugin Plugin 用于扩展 Webpack 功能,各种各样的 Plugin 几乎让 Webpack 可以做任何构建相关的事情. 配置 Plugin Plugin 的配置很简单, plugi ...

  5. webpack学习笔记--配置resolve

    Resolve Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块,Resolve 配置 Webpack 如何寻找模块所对应的文件. Webpack 内置 JavaScript 模块化语 ...

  6. webpack学习笔记--配置module

    Module module 配置如何处理模块. 配置 Loader rules  配置模块的读取和解析规则,通常用来配置 Loader.其类型是一个数组,数组里每一项都描述了如何去处理部分文件. 配置 ...

  7. Docker学习笔记 — 配置国内免费registry mirror

    Docker学习笔记 — 配置国内免费registry mirror Docker学习笔记 — 配置国内免费registry mirror

  8. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  9. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

随机推荐

  1. 10分钟轻松学会 Python turtle 绘图

    python2.6版本中后引入的一个简单的绘图工具,叫做海龟绘图(Turtle Graphics),turtle库是python的内部库,使用导入即可 import turtle 先说明一下turtl ...

  2. Excel删除重复值

    Sub Uniquedata()Dim rCell As Range'创建Dictionary对象Set d = CreateObject("Scripting.Dictionary&quo ...

  3. ping 丢包或不通时链路测试说明【转】

    转自:https://help.aliyun.com/knowledge_detail/40573.html?spm=5176.2020520165.121.d157.4fe170291Qdp4l#W ...

  4. FFmpeg Scaler Options

    算法 帧率 图像主观感受 SWS_FAST_BILINEAR 228 图像无明显失真,感觉效果很不错. SWS_BILINEAR 95 感觉也很不错,比上一个算法边缘平滑一些. SWS_BICUBIC ...

  5. shell 学习之if语句

    bash中如何实现条件判断?条件测试类型:    整数测试    字符测试    文件测试 一.条件测试的表达式:    [ expression ]  括号两端必须要有空格    [[ expres ...

  6. Golang channel 特性

    最近在项目中遇到了 Go channel 的一些问题,在此记录下 close channel 的一些特性. 关闭channel ch := make(chan bool) close(ch) clos ...

  7. java操作redis之按照关键字删除缓存数据

    思路: 1.链接redis数据库,连接成功2.js.del(key),按照指定的key进行删除,封装删除方法3.js.keys("*"),获取所有键keys的集合,对set集合进行 ...

  8. android7.0以上使用融云即使通讯的坑

    一.连接服务器不走connect()方法 在android6.0以下,在使用融云sdk时,直接将依赖库引入到项目中即可.但是在7.0及以上时,直接应用会发现消息一直发送不出去,错误提示为dlopen ...

  9. linux显示完整目录

    vim ~/.bashrc ##添加以下信息 export PS1='[\u@\h `pwd`]$ ' 然后保存退出 source  ~/.bashrc 或者关机重新启动即可

  10. swift 实践- 02 -- 自定义cell 的简单使用

    import UIKit class MyTableViewCell: UITableViewCell { var imageV: UIImageView? var titleLabel: UILab ...