对于webpack配置中filename和chunkFilename在使用中有些不懂的地方，研究之后记录如下。

filename: string | function

此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下。

对于单个入口起点，filename 会是一个静态名称。

chunkFilename: string

此选项决定了非入口(non-entry) chunk文件的名称。

上面就是关于filename和chunkFilename的官文解释。

首先什么是入口？

目前可以理解为entry字段就是提供的应用的入口文件。（这个解释并不全面）

开始做出如下尝试：

目录结构：

nodule_modules/

dist/

src/

--index.js

--a.js

webpack.config.js

文件webpack.config.js

var path = require('path')module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, '../dist'),filename: '[name].[contenthash:6].js',chunkFilename: '[name].[contenthash:4].js'}
}

上面配置中，整个应用的入口就是文件/src/index.js。

文件src/index.js

import('./a.js')
console.log('index')

文件src/a.js

console.log('a')

打包后的结果可以看出来index.js对应的main.conenthash.js是6位的，a.js对应的1.contenthash.js是4位的。

这和我们预想的结果一样，filename设置的是入口文件的文件名，chunkFilename设置的是非入口文件的文件名。动态加载的文件a.js并不是入口文件。

我们知道webpack打包的文件分为三大模块，一个是第三方库，这部分比较稳定，可以打包到一起，利于缓存。一个是业务代码，基本上每次发版都会修改。最后一个是webpack生成的runtime和manifest，每次打包都会改变。

现在我们的代码中只涉及到了自己的业务代码，并没有第三方库代码，即使这样我们也可以分离出webpack生成runtime和manifest。

修改配置如下：

var path = require('path')module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, '../dist'),filename: '[name].[contenthash:6].js',chunkFilename: '[name].[contenthash:4].js'},optimization: {runtimeChunk: {name: 'manifest'}}
}

可以看到entry对应生成的文件main.js文件的hash变成了4位，但是entry明明就是规定的是应用的入口文件，对应的文件名配置应该是filename，对应的hash位数应该是6位。

但现实它就是4位的。

并且还能看出来新分离出来的manifest.js的hash是6位的。

这其实也说明了webpack打包的应用本质上的入口并不是entry字段提供的文件，应用的入口是webpack自己生成的runtime。是通过runtime + manifest才将我们的代码和第三方库组织起来并且正常运行的。

所以webpack打包的应用入口是自己生成的runtime + manifest。

没有提取manifest的时候entry生成对应的main.js的hash位数是正确的。这其实只是一个巧合，因为这个情况下整个引用的入口就是main.js，因为manifest + runtime并没有从main,js中分离出来。所以入口文件对应的就是main.js，然后filename的设置是正确应用在了main.js上。

从上面的分析中可以推倒出，如果我们把manifest + runtime内联到HTML文件中，那么将不会有6位hash的文件被生成，因为并没有入口的js文件被生成。修改配置文件如下：

var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')module.exports = {mode: "development",entry: './src/index.js',output: {path: path.resolve(__dirname, './dist'),filename: '[name].[contenthash:6].js',chunkFilename: '[name].[contenthash:4].js'},optimization: {runtimeChunk: {name: "manifest",},},plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new ScriptExtHtmlWebpackPlugin({inline: /manifest..*.js$/})]
}

从上图中可以看到确实没有6位hash的文件被生成了。

总结：

output.filename规定的是应用入口文件的名称，而output.entry提供的是webpack打包的入口。某种情况下这两个入口是统一的。

通过webpack打包后的应用入口是webpack生成的manifest + runtime。当没有分离manifest + runtime的时候，这部分生成的内容会和entry字段提供的文件相同。

参考

输出(output)
manifest

wbepack中output.filename和output.chunkFilename相关推荐

=在php中,PHPExcel在PHP7中，save(‘php://output’)出现ERR_INVALID_RESPONSE错误的解决方法...
在php7之前是可以正常导出的,在php7中使用save('php://output')出现ERR_INVALID_RESPONSE的错误主要是下面错误导致. 1.header和缓冲区的错误导致,下面 ...
C#调用SQL中的存储过程中有output参数，存储过程执行过程中返回信息
C#调用SQL中的存储过程中有output参数,类型是字符型的时候一定要指定参数的长度.不然获取到的结果总是只有第一字符.本人就是由于这个原因,折腾了很久.在此记录一下,供大家以后参考! 例如: CR ...
matlab中fval函数,请问matlab中[x,fval,exitflag,output] = simulannealbnd(fun,...)函数怎么调用...
请问matlab中[x,fval,exitflag,output] = simulannealbnd(fun,...)函数怎么调用,有相应的实例吗?或者帮我看一下下面的程序,怎么改. function ...
RuntimeError: Given input size: (256x4x4). Calculated output size: (256x0x0). Output size is too sma
最近在跑一个联邦学习项目,用到的数据集是cifa-10,跑代码时出现以下报错: RuntimeError: Given input size: (256x4x4). Calculated output ...
Linux中source filename .(点)filename ./filename sh filename的区别
在shell中source filename 和 . filename是一样的,但source和 ./filename.sh的执行结果有很大区别,借用一张网上的图.如下可以看到通过./filenam ...
RuntimeError:Given input size:(256x1x1). Calculated output size: (256x0x0).Output size is too small
RuntimeError: Given input size: (256x1x1). Calculated output size: (256x0x0). Output size is too sma ...
IC基础知识（六）SV中default input #1 output #1的解释
目录 1. clocking-endclocking块 2. clocking shew的含义 3. 实例代码 4. clocking event 5. clock cycle延时 '##' 6. d ...
python中output使用_Python output.Output方法代码示例
# 需要导入模块: import output [as 别名] # 或者: from output import Output [as 别名] def __init__(self,param,grid ...
.NET笔试题（关于迭代的：遍历XML中的FileName）
一.使用迭代算法,遍历XML文件中所有的文件名写一个函数返回文件名集合在主函数中调用该方法: 以后有关迭代的都写到这儿转载于:https://www.cnblogs.com/jixinyu123 ...

wbepack中output.filename和output.chunkFilename

参考

wbepack中output.filename和output.chunkFilename相关推荐

最新文章

热门文章