6天学会webpack构建工具-第一天（理解和掌握webpack的配置、概念）

1.学习目标

清楚理理解和掌握webpack的配置、概念

2.安装webpack

2.1 全局安装（不推荐）

全局安装webpack，这会将你项⽬目中的webpack锁定到指定版本，造成不同的项⽬目中因为webpack依赖不不同版本⽽而导致冲突，构建失败

# 安装webpack V4+版本时，需要额外安装webpack-cli
npm install webpack webpack-cli -g
# 检查版本
webpack -v
# 卸载
npm uninstall webpack webpack-cli -g

2.2 项⽬目安装（推荐）

# 安装最新的稳定版本
npm i -D webpack
# 安装指定版本
npm i -D webpack@<version>
# 安装最新的体验版本 可能包含bug,不不要⽤用于⽣生产环境
npm i -D webpack@beta
# 安装webpack V4+版本时，需要额外安装webpack-cli
npm i -D webpack-cli

2.3 检查安装

webpack -v //command not found 默认在全局环境中查找
npx webpack -v// npx帮助我们在项⽬目中的node_modules⾥里里查找
webpack
./node_modules/.bin/webpack -v//到当前的node_modules模
块⾥里里指定webpack

3. 启动webpack配置

webpack是基于node,webpack.config.js是通过module.exports导出配置

3.1-webpack默认配置

• webpack默认⽀支持JS模块和JSON模块
• ⽀支持CommonJS Es moudule AMD等模块类型
• webpack4⽀支持零配置使⽤用,但是很弱，稍微复杂些的场景都需要额外扩展

3.2-准备执行构建

• 新建src⽂文件夹
• 新建src/index.js、src/index.json、src/other.js

### index.js
const json = require("./index.json");//commonJS
import { add } from "./other.js";//es module
console.log(json, add(2, 3));
### index.json
{
"name": "JOSN"
}
### other.js
export function add(n1, n2) {
return n1 + n2;
}

3.3- 执⾏行行构建

# npx⽅方式
npx webpack
# npm script
npm run test

修改package.json⽂文件：

"scripts": {
"test": "webpack"
},

原理理就是通过shell脚本在node_modules/.bin⽬目录下创建一个软链接

3.4-构建成功

我们会发现⽬目录下多出⼀一个 dist ⽬目录，⾥里里⾯面有个 main.js ，这个文件是⼀一个可执⾏行行的JavaScript⽂文件，⾥里里⾯面包含webpackBootstrap启动函数

3.5-默认配置

const path = require("path");
module.exports = {
		// 必填 webpack执⾏行行构建⼊入⼝口
	entry:'./src/index.js',
	output:{
		// 将所有依赖的模块合并输出到main.js
		filename:'main.js',
		// 输出⽂文件的存放路路径，必须是绝对路路径
		path:path.resolve(__dirname,'./dist')
	}
}

4. webpack核心配置概念

4.1-entry 入口

作用： 执行构建的入口

参数 有三种形式

• 字符串

entry: "./src/index.js"

• 数组

entry: ["./src/index.js", "./src/other.js"]

• 对象 （多文件入口）

entry: {
	index:'./src/index.js'
	other:'./src/other.js'
}

4.2-output 出口

output: {
	// 构建文件资源放在哪？必须是绝对路径
	path: path.resolve(__dirname,'./dist'),
	//构建的文件资源叫啥？ 无论是多出口还是单出口 都推荐使用占位符（20位）
	filename: "[name]-[hash:6].js"
}

占位符

占位符	描述
hash	整个项目的hash值，每构建一次 就会有一个新的hash值
chunkhash	根据不同入口entry进行依赖解析，构建对应的chunk,生成相应的hash。只要组成entry的模块没有内容改动，则对应的hash不变
name	文件名

4.3-mode

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

• production
• development
• none

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

开发阶段的开启会有利利于热更更新的处理理，识别哪个模块变化
⽣生产阶段的开启会有帮助模块压缩，处理理副作⽤用等⼀一些功能

4.4-module

模块，在 Webpack ⾥一切皆模块，⼀个模块对应着一个⽂文件。
Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
当webpack处理理到不认识的模块时，需要在webpack中的module
处进⾏行行配置，当检测到是什么格式的模块，使⽤用什么loader来处
理

module: {
    rules: [
      {
        test: /\.css$/,
        //loader的执行顺序是从后往前
        //css-loader 言简意赅 是把css模块的内容 加入到 js模块中去
        //css in js方式

        //style-loader 从js中提取css的loader 在html中创建style标签 把 css的内容放在这个style标签中
        use: ["style-loader", "css-loader"],
      },
    ],
  },

什么时候使用file-loader

场景：就是当我们需要模块，仅仅是从源代码挪移到打包⽬目录，就可以使⽤用file-loader来处理理，txt，svg，csv，excel，图⽚片资源啦等等

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
@font-face {
	font-family: "webfont";
	font-display: swap;
	src: url("webfont.woff2") format("woff2");
}
body {
	background: blue;
	font-family: "webfont" !important;
}
//webpack.config.js
{
	test: /\.(eot|ttf|woff|woff2|svg)$/,
	use: "file-loader"
}

url-loader file-loader加强版本

url-loader内部使⽤用了了file-loader,所以可以处理理file-loader所有的事情，但是遇到jpg格式的模块，会把该图⽚片转换成base64格式字符串串，并打包到js⾥里里。对小体积的图⽚片⽐比较合适，大图⽚不合适。

module: {
rules: [
	{
	test: /\.(png|jpe?g|gif)$/,
		use: {
		loader: "url-loader",
			options: {
			name: "[name]_[hash].[ext]",
			outputPath: "images/",
			//⼩小于2048，才转换成base64
			limit: 2048
			}
		}
	}
]
}

样式处理

Css-loader 分析css模块之间的关系，并合成一个css
Style-loader 会把css-loader⽣成的内容，以style挂载到页面的heade部分

{
	test: /\.css$/,
	use: ["style-loader", "css-loader"]
}
{
	test:/\.css$/,
	use:[{
		loader:"style-loader",
		options: {
			injectType: "singletonStyleTag" // 将所有的style标签合并成⼀一个
		}
	},"css-loader"]
}

scss 样式处理

	{
	test: /\.scss$/,
	use: ["style-loader", "css-loader", "scss-loader"]
	}

样式⾃动添加前缀

npm i postcss-loader autoprefixer -D

//webpack.config.js
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
},

//postcss.config.js

module.exports = {
	plugins: [
		require("autoprefixer")({
			overrideBrowserslist: ["last 2 versions",">1%"]
		})
	]
};

4.5-loader

Webpack 默认只⽀支持.json 和 .js模块 不支持 不认识其他格式的模块。
模块解析，模块转换器器，⽤用于把模块原内容按照需求转换成新内容。
webpack是模块打包⼯工具，⽽而模块不仅仅是js，还可以是css，图⽚或者其他格式。
但是webpack默认只知道如何处理理js和JSON模块，那么其他格式的模块处理理，和处理理⽅方式就需要loader了。

• loader 处理理webpack不⽀持的格式文件，模块
• 一个loader只处理理一件事情
• loader有顺序，从右到左，从下到上
  常⻅的loader

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

5. Plugins

• 作⽤用于webpack打包整个过程
• webpack的打包过程是有（⽣生命周期概念）钩⼦
  plugin 可以在webpack运⾏行行到某个阶段的时候，帮你做⼀一些事情，类似于⽣生命周期的概念

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

作用于整个构建过程

html-webpack-plugin

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

npm install --save-dev html-webpack-plugin

配置：

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

案例：
webpack.config.js

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
...
plugins: [
	new htmlWebpackPlugin({
		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>

clean-webpack-plugin

npm install clear-webpack-plugin

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
plugins: [
	new CleanWebpackPlugin()
]