webpack4.0核心概念（三）———— 配置文件中的配置项详解以及 bundle chunk module 三者之间的关系

最新推荐文章于 2023-12-22 11:47:56 发布

有蝉

最新推荐文章于 2023-12-22 11:47:56 发布

阅读量511

点赞数 1

文章标签： webpack 配置项详解

本文链接：https://blog.csdn.net/qq_37899792/article/details/108711601

版权

entry
output
mode
loader
plugin
chunk
module
bundle

entry:

指定webpack打包⼊⼝⽂件:Webpack 执⾏构建的第⼀步将从 Entry 开始，可抽象成输⼊

//单⼊⼝ SPA，本质是个字符串
entry:{
 index: './src/index.js'
}
==相当于简写===
entry:"./src/index.js"
//多⼊⼝ entry是个对象 利于seo
entry:{
 index:"./src/index.js",
 login:"./src/login.js"
}

output:

打包转换后的⽂件输出到磁盘位置 : 输出结果，在 Webpack 经过⼀系列处理并得出最终想要的代码后输

出结果。

output: {
 filename: "bundle.js",//输出⽂件的名称
 path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
},
 
//多⼊⼝的处理[name][hash][chunkhash]
output: {
 filename: "[name][chunkhash:8].js",//利⽤占位符，⽂件名称不要重复
 path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
},

占位符详解

[name]：入口文件的名称

[hash]：hash版本号利于缓存当源码（入口文件的代码）改变时，才会更新

[chunkhash] :

[contenthash]

mode

Mode ⽤来指定当前的构建环境

production

development

none

设置 mode 可以⾃动触发 webpack 内置的函数，达到优化的效果

loader 模块处理器

使webpack支持更多的模块（module）

模块解析，模块转换器，⽤于把模块原内容按照需求转换成新内容。

webpack 是模块打包⼯具，⽽模块不仅仅是 js ，还可以是 css ，图⽚或者其他格式

但是 webpack 默认只知道如何处理 js 和 JSON 模块，那么其他格式的模块处理，和处理⽅式就需要

loader 了

style-loader
css-loader
less-loader
sass-loader
ts-loader //将Ts转换成js
babel-loader//转换ES6、7等js新特性语法
file-loader//处理图⽚⼦图
eslint-loader
...

loader: file-loader

原理是把打包⼊⼝中识别出的资源模块，移动到输出⽬录，并且返回⼀个地址名称

所以我们什么时候⽤ file-loader 呢？

场景：就是当我们需要模块，仅仅是从源代码挪移到打包⽬录，就可以使⽤ file-loader 来处理，

txt ， svg ， csv ， excel ，图⽚资源啦等等

moudle

模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。 Webpack 会从配置的 Entry 开始递归找

出所有依赖的模块。

当 webpack 处理到不认识的模块时，需要在 webpack 中的 module 处进⾏配置，当检测到是什么格式的

模块，使⽤什么 loader 来处理。

module: {
	rules: [{
			test: /\.(png|jpe?g|gif)$/,
			//use使用个loader可以用对象，字符串；两个loader需要⽤数组
			use: {
				loader: "file-loader",
				// options额外的配置，比如资源名称
				options: {
					// placeholder 占位符 [name]⽼资源模块的名称
					// [ext]老资源模块的后缀
					// https://webpack.js.org/loaders/file-loader#placeholders
					name: "[name]_[hash].[ext]",
					//打包后的存放位置
					outputPath: "images/"
				}
			}
		},
		//
	]
}

css-loader 分析 css 模块之间的关系，并合成⼀个 css ；序列化css,将css代码放到js中（放到bundle中）

loader 执⾏顺序：从后往前

style-loader 会把 css-loader ⽣成的内容，以 style 挂载到⻚⾯的 head 部分,如下图所示

plugins

plugin 可以在 webpack 运⾏到某个阶段的时候，帮你做⼀些事情，类似于⽣命周期的概念

扩展插件，在 Webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结果或做你想要的事情。

作⽤于整个构建过程

HtmlWebpackPlugin

htmlwebpackplugin 会在打包结束后，⾃动⽣成⼀个 html ⽂件，并把打包⽣成的 js 模块引⼊到该 html

中。

配置

title: ⽤来⽣成⻚⾯的 title 元素
filename: 输出的 HTML ⽂件名，默认是 index.html, 也可以直接配置带有⼦⽬录。
template: 模板⽂件路径，⽀持加载器，⽐如 html!./index.html
inject: true | 'head' | 'body' | false ,注⼊所有的资源到特定的 template 或者
templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body
元素的底部，'head' 将放置到 head 元素中。
favicon: 添加特定的 favicon 路径到输出的 HTML ⽂件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false, 如果为 true, 将添加⼀个唯⼀的 webpack 编译 hash 到所有包含的脚本和
CSS ⽂件，对于解除 cache 很有⽤。
cache: true | false，如果为 true, 这是默认值，仅仅在⽂件修改之后才会发布⽂件。
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写⼊到 HTML ⻚⾯中
chunks: 允许只添加某些块 (⽐如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到⻚⾯之前的排序⽅式，⽀持的值：'none' | 'default' |
{function}-default:'auto'
excludeChunks: 允许跳过某些块，(⽐如，跳过单元测试的块)

例子

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	...
	plugins: [
		new htmlWebpackPlugin({
			clean - webpack - plugin
			title: "My App",
			filename: "app.html",
			template: "./src/index.html"
		})
	]
};
//index.html
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
 <div id="root"></div>
 </body>
</html>

bundle

输出的资源文件就叫资源文件

chunk

一个代码片段

bundle chunk module 三者之间的关系

一个chunks可以对应一个或多个模块

一个bundle对应一个chunks，

我们一般称js文件为bundle

有蝉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack4.0核心概念（三）———— 配置文件中的配置项详解以及 bundle chunk module 三者之间的关系

entry output mode loader plugin chunk module bundleentry:指定webpack打包⼊⼝⽂件:Webpack 执⾏构建的第⼀步将从 Entry 开始，可抽象成输⼊//单⼊⼝ SPA，本质是个字符串entry:{ index: './src/index.js'}==相当于简写===entry:"./src/index.js"//多⼊⼝ entry是个对象利于seoentry:{ index:"./src/i..
复制链接

扫一扫