webpack详解

webpack详解
        webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

一、webpack是什么

1.1 解释

        webpack是一个前端打包工具；

        用它来处理现代前端错综复杂的依赖关系（A插件需要B插件B插件有D插件F插件需要A插件）生成浏览器可以识别静态资源；

        react脚手架 angular等现代框架脚手架都是依赖webpack。

1.2 核心概念

        入口entry 项目运行的起点，告诉webpack从哪开始打包；

        出口output 打包好放哪 filename文件名 path路径；

        模式mode 产品模式production 开发模式development；

        加载器loader webpack默认只能加载处理js文件，loader让webpack拥有处理其他文件的能力；

        插件plugin webpack运行生命周期过程中做一些其他任务（压缩，清理）。

二、安装

2.1 创建文件

2.2 安装webpack与webpack脚手架

2.3 文件创建

手动创建一个dist文件夹，dist->index.html；在src目录下分别创建header.js 、index.js，一个简单的项目就搭建成功了。

三、 JS打包

3.1 webpack目录下创建配置文件webpack.config.js
        读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js
```
const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
   path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}
```
3.2 命令行执行编译命令

运行npm命令执行打包
```
npm run dev
```
3.3 webpack目录下创建index.html
引用bundle.js
```
<body>
    <script src="dist/bundle.js"></script>
</body>
```
3.4 浏览器中查看index.html

四、loader加载器

4.1CSS打包

1. 安装style-loader和 css-loader
        Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

        Loader 可以理解为是模块和资源的转换器。

        首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css
```
npm i css-loader style-loader -D
```
2. 修改webpack.config.js
```
const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{},
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}
```
3. 在src文件夹创建style.css
```
.active{
    color:#f70;
    font-weight: 900;
    margin: 10px;
}
```
4. 修改main.js
在第一行引入style.css
```
require('./style.css');
```
4.2 SASS打包

1. 安装 sass-loader
```
npm i sass sass-loader -D
```
2. 修改配置
```
{test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]}
```
整体效果如下图：

五、打包html中图片资源

html中的图片url-loader没法处理，它只能处理js中引入的图片；样式中图片，不能处理html中img标签，需要引入其他html-loader处理。

5.1 添加图片
在src/index.html添加两个img标签

5.2 安装loader
```
npm install html-loader --save-dev 
```
5.3 配置loader
```
use:[{
        loader:"url-loader",  //使用url加载器
         options:{limit:5000,name:'images/[hash].[ext]'},
         // 选项,当图片小于5000字节时候，转换base64（小图片减少一次http请求）
        // 文件命名 images文件夹，hash值（计算出图片的名称） ext 后缀名
    }]
```
六、打包iconfont 字体图标

6.1 首先需要安装url-loader
bootstrap4.x之后，boostrap的css里删除了图标分开了我们在引入一个下载：npm i bootstrap@4.1.3 -D 由于4.x版本icon文件分离出去所以还需要下载open-iconic：
```
sudo cnpm i https://github.com/iconic/open-iconic.git -D
```
6.2 相关配置如下
```
{
   test:/\.(png|woff|woff2|svg|ttf|eot)$/,
   use:{
        loader:'url-loader',
        options: {
            limit: 100000,  //这里要足够大这样所有的字体图标都会打包到css中
        }
}
```
注意：limit一定要保证大于最大字体文件的大小，因为这个参数是告诉url-loader，如果文件小于这个参数，那么就以Data Url的方式直接构建到文件中。使用这种方式最方便，不用打包后路径的问题，但是缺点就是构建出来的文件特别大，如果线上不要使用这种方式打包。

6.3 安装file-loader
```
npm install --save-dev file-loader
```
6.4 配置相关的文件
```
{
   test: /\.(woff|woff2|svg|ttf|eot)$/,
   use:[
        {loader:'file-loader',options:{name:'fonts/[name].[hash:8].[ext]'}}//项目设置打包到dist下的fonts文件夹下
     ]
 }
```
6.5 发现出现错误，字体文件加载错误
最后发现是在webpack配置的时候自己手动添加了下面的代码而引起的错误：在 webpack.base.conf.js文件中删除以下代码
```
{
        test: /\.(woff|woff2|svg|ttf|eot)$/,     
        use: [
          { loader: 'file-loader', options: { name: 'fonts/[name].[hash:8].[ext]' } }//项目设置打包到dist下的fonts文件夹下
        ]
      }
}
```
七、 plugin插件

7.1 HTML模板插件

作用为生成html模板文件，自动打包好的js插入到模板文件。

1. 安装
```
npm i html-webpack-plugin -D
```
2. webpack.config.js配置
```
//导入
const HtmlWebpackPlugin=require('html-webpack-plugin')
...
//使用
plugins:[new HtmlWebpackPlugin({template:'./public/index.html'})]
```
7.2 清理dist目录

作用是在打包之前删除dist目录。

7.3 抽出插件

作用为把css做为一个单独的文件抽出。

安装：
```
npm install --save-dev mini-css-extract-plugin
```
webpack.config.js配置
```
//导入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
...
//实例化插件
new MiniCssExtractPlugin({filename:"style-[hash:7].css"})
...
//配置
loader：{test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]},
```
八、哈希命名

通过命名可以控制浏览器的缓存，当文件发生变化时，hash就变化，文件名也就变化，浏览器就不缓存，当文件名保持不变，浏览器而此请求会从缓存里面去请求内容，提供二次加载的速度（有效的控制缓存）。

        contenthash 内容发生变化时contenthash值才会发生变化；

        chunkhash 入口放生变化时，当前的文件chunkhash会变化；

        hash 只要项目内容发生变化，hash就会变化。

九、优化
9.1 css 压缩

1. 安装：
```
npm i css-minimizer-webpack-plugin -D
```
2. 导入：
```
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
```
9.2 js的压缩

1. 安装：
```
npm i terser-webpack-plugin -D
```
2. 导入：
```
const TerserPlugin = require("terser-webpack-plugin");
```
3. 实现压缩与优化
```
	optimization: {
    minimize: true, //默认是压缩
    minimizer: [new CssMinimizerPlugin(),new TerserPlugin()],//压缩器
	},
```
4. 代码分割
```
	optimization: {
    splitChunks: {
        chunks: "all", 
       // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}
```
十、目录别名
```
resolve: {
 // 别名：@代表是 src目录
alias: {
     '@': path.resolve(__dirname, './src'),
 }
    },
```
十一、开发工具
```
devtool:"eval-cheap-source-map",
作用，错误与源代码有个一一对应关系
```
十二、webpack的魔法注释
```
魔法注释 
	/* webpackChunkName:"jquery" */
给当前的js 文件命名
 /* webpackPrefetch: true */ 
网络有空闲预加载js
```
相关阅读:
静态搜索iOS动态链接函数的调用位置
 JavaScript中的构造函数总结
 预训练word2vec
Grafana+Prometheus+Pushgateway实现对emqx的监控
 Windows 环境下 MySQL Server 清空 Log 文件命令
 Z410 2023款无人机，专为零基础开发者打造的入门级开源无人机
 I/O
面试题:volatile能否保证线程安全
 Vue3+Vite3+Vant初体验及踩过的一些坑
 Socket编程基础（1）
原文地址：https://blog.csdn.net/zhangxiaobai___/article/details/128006133

一、webpack是什么

1.1 解释

1.2 核心概念

二、安装

2.1 创建文件

2.2 安装webpack与webpack脚手架

2.3 文件创建

三、 JS打包

四、loader加载器

4.1CSS打包

4.2 SASS打包

五、打包html中图片资源

六、打包iconfont 字体图标

七、 plugin插件

7.1 HTML模板插件

7.2 清理dist目录

7.3 抽出插件

八、哈希命名

九、优化 9.1 css 压缩

9.2 js的压缩

十、目录别名

十一、开发工具

十二 、webpack的魔法注释

九、优化
9.1 css 压缩

十二、webpack的魔法注释