webpack4.0核心概念（三）———— 配置文件中的配置项详解 以及 bundle chunk module 三者之间的关系
程序员文章站
2022-05-29 12:58:18
...
- 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
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