webpack基础概念

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，图⽚资源啦等等

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

style-loader 会把css-loader⽣成的内容，以style挂载到⻚⾯的head部分

module

模块，在 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/"
				}
			}
		},
		//
	]
}

plugin

plugin 可以在webpack运⾏到某个阶段的时候，帮你做⼀些事情，类似于⽣命周期的概念扩展插件，在 Webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结果或做你想要的事情。作⽤于整个构建过程

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

htmlwebpackplugin配置:

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: 允许跳过某些块，(⽐如，跳过单元测试的块)

clean-webpack-plugin
做清洁打扫的工作
删除冗余文件

bundle

输出的资源文件

module.exports = {
    entry: './main.js',  // 一个入口
    output: {
      filename: 'bundle.js'
    }
};

如下图中圈住的js文件

chunk

一个模块被webpack处理后，它会变为chunk
下图中圈住的都是chunk

总结：
一个chunk可以对应一个模块
一个chunks可以对应一个或多个模块
一个bundle对应一个chunks。（bundle不等于chunks,因为bundle还有启动函数）我们一般称js文件为bundle