Webpack详解与配置环境

webpack：webpack网址

1、工作原理：

Webpack是一个非常强大的静态模块的打包工具。从文件入口开始，递归解析以来关系，然后将所有模块打包成一个或多个budle文件。

2、webpack核心概念：

Entry：入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。

进入入口起点后,webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。

Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。

Module：模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

Chunk：代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

Loader：loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

Plugins： loader 被用于转换某些类型的模块,而plugins(插件)则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务(包括：打包优化，资源管理，注入环境变量等)

1.入口（ entry ）：

entry 对象是用于 webpack 查找启动并构建 bundle 。entry 是应用程序的起点入口，从这个起点开始，应用程序启动执行。如果传递一个数组，那么数组的每一项都会执行。入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph ) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

简单规则：每个 HTML 页面都有一个入口起点。单页应用(SPA)：一个入口起点，多页应用(MPA)：多个入口起点。

默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：

//单入口--字符串
module.exports = {entry: './path/to/my/entry/file.js',
};
//多入口--数组
module.exports = {entry: ['./src/index.js', './src/add.js']
};
//多入口--对象
module.exports = {entry: {home: './home.js',about: './about.js',contact: './contact.js'}
};

entry 的值类型：

字符串：单入口，打包形成一个chunk，最终只会输出一个 bundle 文件，chunk 的名称默认是 main

数组：多入口，所有的入口文件最终也只会形成一个chunk，最终输出一个 bundle 文件，chunk 的名称默认为 main 。一般只用在 HMR 功能中让html热更新生效

对象：多入口，有多少个 key 就会形成多少个chunk，也就输出多少个 bundle 文件，每个键(key)会是 chunk 的名称。在对象类型中，每个key的值还可以是一个数组，不仅仅是一个字符串

2.输出（ output ）：

//webpack.config.js
const path = require('path');
module.exports = {entry: './path/to/my/entry/file.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'my-first-webpack.bundle.js', },
};

2.1：output .filename（文件名和目录）

此选项决定了每个输出 bundle 的目录和名称。这些 bundle 将写入到 output.path 选项指定的目录下。

对于单个入口起点，filename 会是一个静态名称。然而，当通过多个入口起点( entry point)、代码拆分( code splitting )或各种插件(plugin)创建多个 bundle ，应该使用其他方法来让每个 bundle 都有一个唯一的名称。

module.exports = {//...output: {filename: 'js/bundle.js'}
};
//多入口--使用入口名称：
module.exports = {//...output: {filename: '[name].bundle.js'}
};
//多入口--使用每次构建过程中，唯一的 hash 生成
module.exports = {//...output: {filename: '[name].[hash].bundle.js'}
};
...

2.2、 output .path（文件目录）

output .path 指定所有输出文件的目录，即将来所有资源输出的公共目录。path 必须是绝对路径。

module.exports = {//...output: {path: path.resolve(__dirname, 'dist')}
};

2.3、 output .publicPath（引用资源的路径前缀）

publicPath 指定的是 html 文件中的所有资源引入的公共路径前缀。它并不会对生成文件的路径造成影响，而是在 html 文件引入各种资源时，将 publicPath 作为前缀加到引入资源的路径前面。

实例：

在 vue-cli 生成的 webpack 配置中，生产环境下 publicPath 的值默认是 '/'，即当前目录的根目录。

打包过后，我们打开 html 文件，可以看到 html 文件中引入的资源路径为：

可以看到，都在路径前面加了 / 符号。当我们打开浏览器访问生成的 html 文件时，会发现报错，资源访问不到，报404，此时资源的访问类似如下：

在服务器上可能会是如下，但访问一样可能会有问题。

我们可以将 publicPath 修改为相对路径，或者直接把它注释掉也行。

3.Loader：

在 webpack 的配置中，loader 有两个属性：

test 属性，识别出哪些文件会被转换。

use 属性，定义出在进行转换时，应该使用哪个 loader。

include/exclude（可选）：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）

query（可选）：为loaders提供额外的设置选项

//示例：webpack.config.js
const path = require('path');
module.exports = {output: {filename: 'my-first-webpack.bundle.js',},module: {rules: [{ test: /\.txt$/, loader: 'raw-loader' },{ test: /\.css$/, use: ['style-loader', 'css-loader'] }   //使用多个loader的话应该用 use], },
};

以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这相当于告诉 webpack 编译器在碰到 require()/import 语句中被解析为 '.txt' 的路径时，在对它打包之前，先使用raw-loader 转换一下。

使用多个loader的话应该用 use ，use 数组中的 loader 执行顺序：从右到左，依次执行。比如上面的 css 文件，首先 css-loader 会将 css 文件编译成 JS 加载到 JS文件中，然后再由 style-loader 创建 style 标签，将 JS 中的样式资源插入到 head 标签中。

1.1、CSS-loader

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同。css-loader使你能够使用类似import的方法来引入 css 文件，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中，由此就可以在JS文件中引入css文件了

//安装
npm install --save-dev style-loader css-loader　　//css-loader版本太高编译可能会出错，建议降低版本比如 css-loader@1.0.1 可用
//使用
module.exports = {...module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader"},exclude: /node_modules/},{test: /\.css$/,　　//对同一个文件引入多个loader的方法。loader的作用顺序是后面的loader先开始作用use: [{loader: "style-loader"}, {loader: "css-loader"}]}]}
};

4.插件（plugin）

Loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，包括：打包优化、压缩、资源管理、注入环境变量等。插件目的在于解决 loader 无法实现的其他事。

要使用某个插件，我们需要通过npm安装它，然后在 plugins 属性下添加该插件的一个实例。由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。多数插件可以通过选项自定义，你也可以在一个配置文件中因为不同目的而多次使用同一个插件。

//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {module: {rules: [{ test: /\.txt$/, use: 'raw-loader' }],},plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

4.1、案例 BannerPlugin插件（添加版权说明）

const webpack = require('webpack');
module.exports = {
...module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader"},exclude: /node_modules/},{test: /\.css$/,use: [{loader: "style-loader"}, {loader: "css-loader",options: {modules: true}}, {loader: "postcss-loader"}]}]},plugins: [new webpack.BannerPlugin('wenxuehai版权所有，翻版必究')],
};

3、Webpack打包过程

读取配置文件：Webpack会首先读取项目中的配置文件，例如webpack.config.js或者webpackfile.js等。

解析入口文件：Webpack会从配置文件中获取入口文件路径，根据入口文件路径解析出入口文件及其依赖的模块。

解析依赖模块：Webpack会逐个解析入口文件依赖的模块，以此类推，逐步构建出完整依赖树。

加载模块：Webpack会根据解析出的模块路径逐个加载模块，支持多种文件格式的加载。

分析模块依赖关系及模块交互：Webpack会分析每个模块之间的依赖关系，例如调用其它模块的函数或变量引用等，以此建立模块之间的交互关系图。

打包模块：Webpack会将所有模块根据依赖树的关系，逐步打包成一个或多个JavaScript文件，支持多种打包方式。

生成输出文件：Webpack会根据配置文件中指定的输出路径和文件名，生成最终的输出文件。

优化打包结果：Webpack还提供了一些优化功能，例如压缩代码、合并模块等，可以进一步提升打包结果的性能和效率。

构建完成：Webpack打包过程完成后，会输出一些统计信息以及警告或错误信息，方便开发者定位和解决问题。

4、Webpack生命周期：

Webpack 在构建过程中会触发一系列的生命周期事件，开发者可以针对这些事件进行相应的处理或插件化。下面是Webpack的主要生命周期事件：

beforeRun：在 Webpack 开始执行构建任务前触发的事件。
run：Webpack 开始进行编译打包时触发的事件。
beforeCompile：在 Webpack 开始编译之前触发的事件。
compile：Webpack 开始编译时触发的事件。
compilation：在 Webpack 的每次编译构建过程中触发的事件。
emit：在 Webpack 输出资源到output目录之前触发的事件。
afterEmit：在 Webpack 输出资源到output目录之后触发的事件。
done：Webpack 构建完成所有的编译、和输出等任务之后触发的事件。
failed：Webpack 构建过程中出现错误时触发的事件。

webpack配置vue3开发环境

1.npm i -D webpack webpack-cli webpack-dev-server

webpack是基本的包
webpack-cli是执行脚本的包
webpack-dev-server是启动一个开发服务器的包

2.配置html-webpack-plugin插件

2.1 npm i -D html-webpack-plugin

2.2 在项目根目录下创建index.html模板和下载html-webpack-plugin插件,然后修改index.html文件,添加一个id为root的div标签,再在webpack.config.js中配置html插件.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"></div><h1>123</h1></body>
</html>

3.下载vue和vue-loader(webpack默认不识别.vue结尾的文件,需要下载loader解析)vue-loader文档地址,安装成功之后配置webpack.config.js,然后编写入口文件index.js导入vue。

3.1

npm i vue
npm i -D vue-loader

4.手动添加css-loader

npm i -D vue-style-loader css-loader

5.手动添加sass和sass-loader

npm i sass
npm i -D sass-loader

6.package.json脚本添加webpack打包指令

  "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","webpackbuild": "webpack"}

7.添加typescript支持和ts-loader。vue-loader支持ts

因为要支持typescript，首先使用tsc --init在项目根目录下生成一个tsconfig.json文件，然后修改index.js为index.ts,当然webpack.config.js中的入口文件的index.js也需要修改为index.ts，然后添加参考vue-loader的文档添加ts-loader配置。因为要使ts识别vue，要在根目录添加一个env.d.ts的声明文件

7.1

npm install -D typescript ts-loader

// webpack.config.js
module.exports = {resolve: {// 将 `.ts` 添加为一个可解析的扩展名。extensions: ['.ts', '.js']},module: {rules: [// ... 忽略其它规则{test: /\.ts$/,loader: 'ts-loader',options: { appendTsSuffixTo: [/\.vue$/] }}]},// ...plugin omitted
}

// env.d.ts
declare module "*.vue" {import { DefineComponent } from "vue"const component: DefineComponent<{}, {}, any>export default component
}

<template><div class="container"><h1>hello</h1></div>
</template><script setup lang="ts">
import { ref, Ref } from "vue";
const count: Ref<number> = ref(123);
</script><style scoped lang="scss">
.one {color: yellowgreen;
}
</style>

需要修改tsconfig.json中的strict为false，这样可以避免一些小问题。