webpack初入门（三）---插件的使用

青旅半醒 2023-03-13 02:23 18阅读 0赞

### 学习下webpack的插件功能，下面有html产出、 ###

要注意写命令是在正确的文件路径下呀！  
**一、html产出（就是让html文件自动生成在dist中，之前的html是自己新建并且将js关联进来的）**

首先在webpack中找到【插件】

![在这里插入图片描述][20200509172410486.png]  
找到这个插件↓  
![在这里插入图片描述][20200509172439965.png]

接下来就是安装配置和使用了  
安装的话复制官网上的安装命令，然后将npm改成cnpm

cnpm install --save-dev html-webpack-plugin

安装完成后，配置webpack.config.dev.js文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70]这两句引入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 1]这时的将之前生成dist文件删除，然后运行 npm run dev

生成一个 dist/index.html文件，该文件中还引入了生成的js，奈斯！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 2]npm run start 回车  
然后成功开启！

**二、css抽离（就是将内联的css样式改成外联的css样式，link引进来那种！）**

首先在官网上找到ExtractTextWebpackPlugin插件，接下来是安装配置，按照官方的文档来就行了！嗯，别这里用一点那里用一点！

装的webpack版本是4的，所以直接安装官网上的第一个就行

npm install --save-dev extract-text-webpack-plugin

在webpack.config.dev.js中配置

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

因为我是在webpack原有的基础上来增加这个的，所以写成这样↓  
![在这里插入图片描述][20200509222656860.png]然后就 $ npm run start 运行！成功啦！上面按照官网的来生成的是style.css文件，  
![在这里插入图片描述][20200509223152560.png]外联样式！！

按照这个来的话↓

const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")
       //loader配置：
       use: ExtractTextWebapckPlugin.extract({ 
             use: 'css-loader'
           }) //不再需要style-loader
    
       //pulgin配置
       new ExtractTextWebapckPlugin('css/[name][hash:6].css')

这样会生成一个css文件夹！里面包含一个css文件

**三、图片打包，类似图片打包添加进去**

首先在src/asset/建立一个img文件，然后放入图片，然后开始安装file-loader 和url-loader，一开始我只装了file-loader，然后报错了！

cnpm I url-loader file-loader -D

然后将图片在src/index.js中加入

const img1 = require('./asset/img/1.jpg')
    	const img2 = require('./asset/img/2.jpg')
    	
    	const  imgIns = new Image() 
    	const  img2Ins = new Image()
    	
    	imgIns.src = img1.default 
    	img2Ins.src = img2.default
    	
    	document.body.appendChild( imgIns )
    	document.body.appendChild( img2Ins )

然后配置webpack.config.dev.js

//url-loader 存base64 file-loader存文件（woff mp3）
    	    { 
    	        test:/\.(png|jpg|gif)/,
    	        use:[{ 
    	          loader: 'file-loader',
    	          options: { 
    	                limit: 5000,//字节少于5000 ——》 base64 超过5000 file
    	                outputPath: 'images/', //5000意思存到images
    	          }
    	        }]
    	      }

然后运行，$ npm run start  
base64图片可以减少ajax请求，展示时间短  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 4]

浏览器中显示成功！嗯奈斯！

**三、静态资源拷贝打包**

像css和font这种文件是原封不动地复制到dist文件中地，所以这种文件的打包称为静态资源的拷贝打包

首先从[font awesome][]下载font文件和css文件，然后放到public中

安装copywebpackplugins插件和安装配置

cnpm install --save-dev copy-webpack-plugin

然后在webpack.config.dev.js中配置

const CopyWebpackPlugin = require('copy-webpack-plugin');
    	
    	 plugins: [
    	        new CopyWebpackPlugin([{ 
    	            from: path.join(__dirname,'../public'),//这个文件从哪里来
    	            to : path.join(__dirname,'../dist/static')//拷贝的文件放到哪里去，涉及到路径的全是用path.join
    	        }])
    	
    	    ]

plugins中只需要两个参数，一个是from一个是to

配置好运行然后在dist中出现了static文件↓  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 5]  
**四、错误资源定制**

当我们某个单词写错时，在浏览器控制台中看到的是显示打包后代码的行数的错误，造成不准确

比如：  
在 **三、图片打包中** 在index.js中写少一个2  
![在这里插入图片描述][20200510173059214.png]  
然后运行，运行后发现打包看运行报错的位置是在哪里  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 6]显示是39行，但是我们39行并没有报错，报错显示的应该是在打包后生成的js文件中，并不是在原本的js文件中的，这时候只需要在webpack.config.dev.js中加入错误资源定制的语句

devtool: 'source-map'

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 7]运行！

这时

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70_pic_center]  
插件使用的过程中经常会出错：原因1、单词写错，看看变量是否对应 2、安装插件是是否有有安装完整

**问题：为什么需要在打包后文件名上加hash？**

因为项目有不同版本，加上hash 6个数字标识就会形成不同的版本

目的：就是为了创建多个版本，便于版本切换

比如：  
在webpack.config.dev.js文件中，  
![在这里插入图片描述][20200510182653718.png]这时打包两次后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 8]  
生成不同版本的打包文件，这时还可以加上时间戳来区分新老版本  
![在这里插入图片描述][202005101830377.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 9]这时生成的文件会有加上时间的版本，害 我觉得还能将时间转换下

[20200509172410486.png]: /images/20230312/6203a8e3dbff48c0b05f67b36520bd74.png
[20200509172439965.png]: /images/20230312/59c55a95c9484dcc930a71a972e58918.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70]: /images/20230312/4794c4788cea44ca98c7c6e5df957324.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 1]: /images/20230312/e1092f2697ee45f692741d6bc499410c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 2]: /images/20230312/bf9503bbc7cb42a5a652252cd06cf222.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 3]: /images/20230312/020569156be14f96b3669c8cb0000800.png
[20200509222656860.png]: /images/20230312/a3cc35506616493da76b7d0a82c99409.png
[20200509223152560.png]: /images/20230312/9dcee0fba687489ab4ff70cd4cd31230.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 4]: /images/20230312/57a0e2c1709a425498a58590ce0abaef.png
[font awesome]: https://fontawesome.dashgame.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 5]: /images/20230312/2b3805475a1b47b4a17d317266833367.png
[20200510173059214.png]: /images/20230312/f4026d79f0824ce28d9bafdbc330fd92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 6]: /images/20230312/5811780f57a0436ba5776edbe23611a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 7]: /images/20230312/3ce769c96f194f059f9a822de8b3b14f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/77b91bee02ed4f6da0ffb025e45567b6.png
[20200510182653718.png]: /images/20230312/399335f0bc2b45b9aed61609e0cd66db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 8]: /images/20230312/4e22db2c1d6f4e68a84fa5571777bf2b.png
[202005101830377.png]: /images/20230312/a1f327eb759f4a589f77ca892f177f69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 9]: /images/20230312/d9153d3981ed422b97c88866f17627b3.png