Webpack 打包其他资源(详解)

分手后的思念是犯贱 2022-10-06 00:35 214阅读 0赞

# 打包其他资源 #

需要安装的

> npm install --save-dev html-webpack-plugin 处理html  
> npm i url-loader file-loader -D处理图片

### 打包HTML资源 ###

需要安装

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

下载完还需要引用

const HtmlWebpackPlugin = require('html-webpack-plugin');

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70]

自动会新建一个index.html文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70 1]

### 打包图片资源 ###

新建images文件,里面放入图片，  
![在这里插入图片描述][20210610145710727.png]

然后在index.less文件里输入css代码,在index.html中输入

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70 2]  
继续配置webpack.config.js

{ 
            test: /\.(png|jpe?g|gif|svg)$/,
    
            loader: 'url-loader',
            options: { 
              // 图片大小小于 8kb，就会被 base64 处理
              // 优点: 减少请求数量（减轻服务器压力）
              // 缺点：图片体积会更大（文件请求速度更慢）
              limit: 8 * 1024,
              // 问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs
              // 解析时会出问题：[object Module]
              // 解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析
              //注意目前新版本已经处理好了,默认都给关闭掉了
              // esModule: false,
              // 给图片进行重命名
              // [hash:10]取图片的 hash 的前 10 位
              // [ext]取文件原来扩展名
              name: '[hash:10].[ext]'
            }
    
          },

在这直接打包会报错，需要下载

npm i url-loader  file-loader -D

但是在这里有一个注意点:如果直接在index.html文件内输入

图片会显示不出来，我们需要在webpack.config.js中再配置  
问题：默认处理不了html中img图片

{ 
            test: /\.html$/,
            // 处理 html 文件的 img 图片
            //（负责引入 img，从而能被 url-loader 进行处理）
            loader: 'html-loader'
          }

打包完会被解析成哈希模式  
![在这里插入图片描述][2021061016370156.png]

### 打包其他资源 ###

可到阿里巴巴矢量图图标库下载几个矢量图，iconfont.css 和 字体文件 来源于 阿里iconfont![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70 3]  
加入购物车后，直接点下载代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70 4]  
在html文件输入

![在这里插入图片描述][20210610193202359.png]  
创建文件：  
![在这里插入图片描述][20210610192942246.png]  
配置webpack.config.js

最后打包就ok了

## 总结 ##

> 1.要支持CommonJS模块化规范，所以要求打包后的最后结果也遵守该规则  
> 2.Npm模块使用者的环境是不确定的，很有可能并不支持ES6，所以打包的最后结果应该是采用ES5编写的。并且如果ES5是经过转换的，请最好连同SourceMap一同上传。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70]: /images/20221005/bb068a45638247d89cde946c712c4323.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70 1]: /images/20221005/46473a452e32442b9210c13ab4906d2e.png
[20210610145710727.png]: /images/20221005/ef00f9d2f18f45b3bc06c903c7053b71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70 2]: /images/20221005/708fd1b5731a40b1ac32b12f6feccb7f.png
[2021061016370156.png]: /images/20221005/07662c77f85649f1bf553768ba1fa92a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70 3]: /images/20221005/2d9014f16189428797b1395ad13a5756.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70 4]: /images/20221005/dd5190261afd475a89dcfcfdcc7a1324.png
[20210610193202359.png]: /images/20221005/fe9f9698be4e42679bd0249f5cca1867.png
[20210610192942246.png]: /images/20221005/e901d415d69f4991bd5218f2cf1ed96c.png