module是什么意思,module的意思翻译、用法、同义词、，前端webpack术语

很多朋友对于module是什么意思,module的意思翻译、用法、同义词、和前端webpack术语不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！

module、chunk、bundle都是webpack中的术语。那么他们究竟是什么呢？对于这3个名词感觉他们都在说打包文件，但是具体细节的区别呢？希望通过本文大家对此有细致的了解。

一、术语的解释

1.module是什么？

官方概念：Module是离散功能块，相比于完整程序提供了更小的接触面。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

module其实就是一个文件或者文件内通过import等方式引用代码块或第三方等均可认为是一个module，也就是说任何一个可以被导入导出的文件都是一个模块。

2.chunk是什么？

官方概念：Chunk此webpack特定术语在内部用于管理捆绑过程。输出束（bundle）由块组成，其中有几种类型（例如entry和child）。通常，块直接与输出束(bundle）相对应，但是，有些配置不会产生一对一的关系。

当我们写的module源文件传到webpack进行打包时，webpack会根据文件引用关系生成chunk文件，webpack会对这个chunk文件进行一些操作。

3.bundle是什么？

官方概念：bundle由许多不同的模块生成，包含已经经过加载和编译过程的源文件的最终版本。

webpack处理好chunk文件后，最后会输出bundle文件，这个bundle文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。通常我们会弄混这两个概念，以为Chunk就是Bundle，Bundle就是我们最终输出的一个或多个打包文件。大多数情况下，一个Chunk会生产一个Bundle。

我们现在就只创建一个webpack配置，步骤如下：

1.创建一个空文件夹，并且在当前文件夹下打开cmd。

3.执行npmiwebpackwebpack-cli-D,安装webpack的包。

4.创建src，在src内部创建index.html、index.js、index.css、utils.js、common.js，并且编写内部代码。

5.在项目根目录创建webpack.config.js。

├──index.html#这个是HTML模板代码

2.各文件代码内容

<divclass="box">Hello</div>

const{log}=require("./common");

3.webpack的配置

//在配置文件中，使用的模块化规范是commonjs

constpath=require("path");

constHTMLWebpackPlugin=require("html-webpack-plugin");

constMiniCssExtractPlugin=require("mini-css-extract-plugin");

//development开发模式production生产模式

index:"./src/index.js",

utils:"./src/utils.js",

path:path.resolve(__dirname,"dist"),

filename:"./js/[name].bundle-[hash].js",

//每次编译的时候把上一次的内容给清空

//loader-可以让webpack解析非js的其他模块

"css-loader",//css-loader负责解析CSS代码,处理CSS中的依赖

//使用的loader-如果是配置项，则写成对象

loader:"babel-loader",

//更好的在其他的浏览器兼容es6高级语法

//只打包使用的ES6新API的实现代码

template:"./src/index.html",

//每一次编译的bundle.js带一些哈希，防止缓存

//用MiniCssExtractPlugin抽离出css文件，以link标签的形式引入样式文件

filename:"index.bundle-[hash].css",//输出的css文件名为index.css

4.运行webpack

我们可以看出，index.css和common.js在index.js中被引入，打包生成的index.bundle-[hash].css和index.bundle-[hash].js都属于chunk0，utils.js因为是独立打包的，它生成的utils.bundle-[hash].js属于chunk1。

一般来说一个chunk对应一个bundle，比如上图中的utils.js->chunk1->utils.bundle.js；但也有例外，比如说上图中，我就用MiniCssExtractPlugin从chunks0中抽离出了index.bundle.css文件。

三、3种hash值详解

1.webpack中的三种hash分别是：

webpack.config.js输出文件名规则修改为hash时。

path:path.resolve(__dirname,"dist"),

filename:"./js/[name].bundle-[hash].js",

//每次编译的时候把上一次的内容给清空

//用MiniCssExtractPlugin抽离出css文件，以link标签的形式引入样式文件

filename:"index.bundle-[hash].css",//输出的css文件名为index.css

预设的是hash，直接运行打包webpack，我们看看我们打包后的文件是什么样的。

可以看到，所有文件的文件名hash值都是一致的，那我们现在改一下index.css这个文件。

运行打包webpack，我们看看我们打包后的文件是什么样的。

可以看出，修改一个文件，所有文件的hash值跟着变。

结论：牵一发动全身，只改了一个index.css，会导致打包后所有文件的hash值都改变。所以当打包名称设置为hash时，整个项目文件是一致的，修改其中一个会导致所有跟着一起改。

webpack.config.js输出文件名规则修改为chunkhash

path:path.resolve(__dirname,"dist"),

filename:"./js/[name].bundle-[chunkhash].js",

//每次编译的时候把上一次的内容给清空

//用MiniCssExtractPlugin抽离出css文件，以link标签的形式引入样式文件

filename:"index.bundle-[chunkhash].css",//输出的css文件名为index.css

预设的是chunkhash，直接运行打包webpack，我们看看我们打包后的文件是什么样的。

我们可以看出，chunkhash值会根据入口文件的不同而分出两个阵营：

那我们现在照样修改一下index.css：

可以看出，index.css修改后会影响index.css、index.js的chunkhash值。

结论：当规则为chunkhash时，打包后的chunkhash值会根据入口文件的不同而不一样，当某个入口文件修改后重新打包，会导致本入口文件关联的所有文件的chunkhash值都修改，但是不会影响到其他入口文件的chunkhash值。

3.contenthash

webpack.config.js输出文件名规则修改为contenthash

path:path.resolve(__dirname,"dist"),

filename:"./js/[name].bundle-[contenthash].js",

//每次编译的时候把上一次的内容给清空

//用MiniCssExtractPlugin抽离出css文件，以link标签的形式引入样式文件

filename:"index.bundle-[contenthash].css",//输出的css文件名为index.css

预设的是contenthash，直接运行打包webpack，我们看看我们打包后的文件是什么样的。

可以看到，每个文件的contenthash值都不一样，每个文件的contenthash值都是根据自身的内容去生成的，那我们现在修改一下index.css：

可以看出，index.css修改后只会影响index.css的contenthash值，也就是自己的contenthash值。

结论：当规则为contenthash时，每个文件的contenthash值都是根据自身内容而生成，当某个文件内容修改时，打包后只会修改其本身的contenthash值，不会影响其他文件的contenthash值。

同一份逻辑代码中module，chunk和bundle就是在不同转换场景下的三个术语，我们直接写出来的是module，webpack处理时是chunk，最后生成浏览器可以直接运行的bundle。

当打包名称设置为hash时，整个项目文件是一致的，修改其中一个会导致所有跟着一起改。当规则为chunkhash时，打包后的chunkhash值会根据入口文件的不同而不一样，当某个入口文件修改后重新打包，会导致本入口文件关联的所有文件的chunkhash值都修改，但是不会影响到其他入口文件的chunkhash值。当规则为contenthash时，每个文件的contenthash值都是根据自身内容而生成，当某个文件内容修改时，打包后只会修改其本身的contenthash值，不会影响其他文件的contenthash值。

关于本次module是什么意思,module的意思翻译、用法、同义词、和前端webpack术语的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。