webpack学习笔记--配置output
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的更多相关文章
- webpack学习笔记--配置总结
从前面的配置看来选项很多,Webpack 内置了很多功能. 你不必都记住它们,只需要大概明白 Webpack 原理和核心概念去判断选项大致属于哪个大模块下,再去查详细的使用文档. 通常你可用如下经验去 ...
- webpack学习笔记--配置entry
Entry entry 是配置模块的入口,可抽象成输入,Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块. entry 配置是必填的,若不填则将导致 Webpack ...
- webpack学习笔记--配置devServer
devServer 1-6 使用DevServer 介绍过用来提高开发效率的 DevServer ,它提供了一些配置项可以改变 DevServer 的默认行为. 要配置 DevServer ,除了在配 ...
- webpack学习笔记--配置plugins
Plugin Plugin 用于扩展 Webpack 功能,各种各样的 Plugin 几乎让 Webpack 可以做任何构建相关的事情. 配置 Plugin Plugin 的配置很简单, plugi ...
- webpack学习笔记--配置resolve
Resolve Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块,Resolve 配置 Webpack 如何寻找模块所对应的文件. Webpack 内置 JavaScript 模块化语 ...
- webpack学习笔记--配置module
Module module 配置如何处理模块. 配置 Loader rules 配置模块的读取和解析规则,通常用来配置 Loader.其类型是一个数组,数组里每一项都描述了如何去处理部分文件. 配置 ...
- Docker学习笔记 — 配置国内免费registry mirror
Docker学习笔记 — 配置国内免费registry mirror Docker学习笔记 — 配置国内免费registry mirror
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
随机推荐
- 【转】python之random模块分析(一)
[转]python之random模块分析(一) random是python产生伪随机数的模块,随机种子默认为系统时钟.下面分析模块中的方法: 1.random.randint(start,stop): ...
- VS2017打包C#桌面应用
原文地址:https://blog.csdn.net/houheshuai/article/details/78518097 在要打包项目的解决方案 右键→添加→ 新建项目 后出现如下选择 如果没有V ...
- HBase详细概述
原文地址:https://blog.csdn.net/u010270403/article/details/51648462 本文首先简单介绍了HBase,然后重点讲述了HBase的高并发和实时处理数 ...
- 迁移学习(Transfer Learning)
原文地址:http://blog.csdn.net/miscclp/article/details/6339456 在传统的机器学习的框架下,学习的任务就是在给定充分训练数据的基础上来学习一个分类模型 ...
- nc 搭建环境流程及问题
1 拷贝目录,包括eclipse及home两个文件夹 2 将jdk环境配置为home里的jdk,现在为1.5 3 在mde development 中设置数据库链接及应用服务及端口号 4 新建mde项 ...
- T-SQL 日期函数
GETDATE() 它将返回当前日期和时间. 语法 上述函数的语法: GETDATE() 例 以下查询将返回当前日期以及MS SQL Server中的时间. Select getdate() as c ...
- linux服务器上配置多个svn仓库
linux服务器上配置多个svn仓库 1.在指定目录建立仓库保存总目录,本文示例目录设定为:/usr/local/svn/svnrepos # mkdir -p /usr/local/svn/svnr ...
- C/C++中如何在main()函数之前执行一条语句?
在C语言中,如果使用GCC的话,可以通过attribute关键字声明constructor和destructor(C语言中如何在main函数开始前执行函数) #include <stdio.h& ...
- 模块 -- 序列化 hashlib sha logging (加密 加盐 )
模块: 一个py文件就是一个模块 模块分类: 1:内置模块,登录模块,时间模块,sys模块,os模块等等 2: 扩展模块, 3:自定义模块,自己写的py文件 python 开发效率之高:python ...
- Django 笔记(二) 新建 ~ 渲染
新建APP python manange.py startapp app_name 然后右键 pycharm 的项目目录,将新建的目录从服务器上下载进来 URL(Uniform Resoure Loc ...