Output

output配置如何输出最终想要的代码,output是一个object里面包含一系列配置。

1. filename

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

filename: 'bundel.js'

现在有多个chunk要输出时,就需要借助模板和变量了,前面说到webpack会为每个chunk取一个名称,通过占位符确保文件名称的唯一性,可以根据chunk名称来区分输出的文件名:

filename: '[name].js'

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

内置变量还有如下:

1. id, chunk的唯一标识,从0开始。
2. name, chunk的名称。
3. hash, chunk的唯一标识的hash值。
4. chunkhash, chunk内容的hash值。 其中hash和chunkhash的长度可以指定的,[hash:8]这样去指定,默认是20位。
2. chunkFilename

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

3. path

output.path配置输出文件存放在本地的目录,必须是string类型的绝对路径

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

在项目中可能会有一些构建出的资源需要异步加载,加载这些异步资源需要对应的URL地址。
output.publicPath配置发布到线上资源的URL前缀,为string类型,默认值是空字符串,即使用相对路径。
output.path和output.publicPath都支持字符串模板,内置变量只有一个:hash代表编译一次的hash值。

5. crossOrginLoading

webpack输出的部门代码可能需要异步加载,而异步加载时通过jsonp方式实现。jsonp的原理是动态的向HTML中插入一个script标签去异步加载资源。

output.crossOriginLoading则是用于配置这个异步插入标签的crossorigin值。

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

1. anonymous(默认)在加载此脚本资源时不会带上用户的cookie;
2. use-credentials 在加载此脚本资源时会带上用户的cookies;

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

6. libraryTarge和library

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

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

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

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

    1. var(默认)

编写的库将通过var被赋值给通过library指定名称的变量。
假如配置了output.library='LibraryName', 则输出和使用的代码如下:

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

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

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

编写库将通过commonjs规范导出。
假如配置了output.library='LibraryName', 则输出和使用代码如下:

//webpack输出的代码
exports['LibraryName'] = lib_code //使用库的方法
require('library-name-in-npm')['libraryName'].doSomething()
    1. commonjs2

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

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

编写的库将通过this被赋值给通过library指定的名称:

//webpack 输出的代码
this['LibraryName'] = lib_code //使用库的方法
this.libraryName.doSomething()
    1. window

编写的库将通过window被赋值给library指定的名称

//webpack输出的代码
window['LibraryName'] = lib_code //使用库的方法
window.libraryName.doSomething()
    1. global

编写的库将通过global被赋值给通过library指定的名称

//webpack输出的代码
global['LibraryName'] = lib_code //使用库的方法
global.libraryName.doSomething()
6. libraryExport

output.libraryExport配置要导出的模块中哪些子模块需要被导出,它只有在output.libraryTarget被设置为commonjs或者commonjs2时使用才有意义。
假如要导出的模块源码是:

export const a = 1
export default b = 2

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

 
module.exports = lib_code['a']

require('library-name-in-npm') === 1

webpack(3)--Output的更多相关文章

  1. webpack中output配置项中chunkFilename属性的用法

    chunkFilename和webpack.optimize.CommonsChunkPlugin插件的作用差不多,都是用来将公共模块提取出来,但是用法不一样,这里主要介绍chunkFilename的 ...

  2. Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案

    文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

  3. 利用免费cdn加速webpack单页应用

    回顾现状 在之前的学习过程中,react单页应用经过webpack打包之后会输出大概如下的目录结构,它就是站点的所有前端组成了:   1 2 3 4 5 6 MacBook-Pro:output ba ...

  4. webpack的安装和使用

    Webpack是什么 首先可以看下 官方文档 ,文档是最好的老师. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模块格式书写的多个JavaScrip ...

  5. webpack入门和实战(二):全面理解和运用loader和plugins

    您的阅读目录: 一.理解webpack加载器loader 二.理解less-loader加载器的使用 三.理解babel-loader加载器的使用 四.webpack命令行常见使用的操作 五.用web ...

  6. webpack 教程 那些事儿03-webpack两大精华插件,热加载

    本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...

  7. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  8. webpack入门级教程

    Webpack是什么 首先可以看下官方文档,文档是最好的老师. 这里也有国外的一个朋友写的入门介绍. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模 ...

  9. webpack使用

    Webpack是一个现代js应用的模块打包机.如果一个文件依赖另一个文件,webpack认为这就存在一个依赖关系.不管另一个文件是什么内容,image,css或js都被当作一个模块.Webpack从e ...

随机推荐

  1. Linux文件IO与通用块层的请求合并

    本文参考https://mp.weixin.qq.com/s/Imt4BW-zoHPpcOpcKZs_AQ, 公众号“Linux阅码场” 请求合并就是将进程内或者进程间产生的在物理地址上连续的多个IO ...

  2. HBulider打包

    1. manifest配置 按照Manifest.json文档说明 manifest配置把工程中的manifest.json文件配置好,下面以我的项目为例进行配置. (1).应用信息 (2).图标配置 ...

  3. spring boot下mybatis遇到No operations allowed after connection closed.

    在配置文件中添加 # for initial,min,maxspring.datasource.initialSize=5spring.datasource.minIdle=5spring.datas ...

  4. 网络流--最大流dinic模板

    标准的大白书式模板,除了变量名并不一样……在主函数中只需要用到 init 函数.add 函数以及 mf 函数 #include<stdio.h> //差不多要加这么些头文件 #includ ...

  5. JQuery实现高级检索功能

    https://blog.csdn.net/muziruoyi/article/details/44494465 < div id= "0" class ="row ...

  6. idea_快捷键default&eclipse

    关键字: SpringMybatisplusRedisApplicationTests github关键字(springboot拦截器完整项目): implements WebMvcConfigure ...

  7. 使用animate()完成修改图片src切换图片的动画效果

    如下所示,在动画效果中的回调函数中进行src的修改和动画的切换 $(".TopImg").animate( {opacity:'toggle'}, "slow" ...

  8. 【MVC】View与Control之间数据传递

    1. Controller向View传递数据 使用ViewData传递数据[弱类型,字典型ViewDataDictionary] ViewData[“Message_ViewData”] = “ He ...

  9. socket套接字和驱动绑定分析

    1. socket()系统调用 socket系统调用是哪个:socket()有3个参数,因此搜索SYSCALL_DEFINE3,然后在检索socket即可. SYSCALL_DEFINE3(socke ...

  10. day43 数据库学习egon的博客 约束

    一 介绍 约束条件与数据类型的宽度一样,都是可选参数 作用:用于保证数据的完整性和一致性主要分为: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 FOREIGN KEY ...