webpack基础详解

Posted 2022-12-13 地中海真帅

介绍:

这篇文章讲述了loader和plugin的一些知识,还有作者自己写代码中的一些错误,还有一些常用指令,当然了还有一些自己的总结

loader使用过程:

步骤一: 通过npm安装需要使用的loader

1. npm install --save-dev css-loader 安装css需要的loader
2. npm install –save-dev style-lodaer 安装style-loader
   推荐将style-loader与css-loader一起使用

步骤二: 在webpack.config.js中的modules关键字下进行配置

module.exports = 
  module: 
    rules: [
      
        test: /\\.css$/i,
        use: ['style-loader', 'css-loader'],
      ,
    ],
  ,
;

注意

css-loader 只解析css文件,但不会将css代码的效果给运用到网页上(没有这个的话,写css文件打包时会报错)

style-loader 可以将css代码的效果解析到网页中(没有这个的话,css文件中的代码效果不会实现)

使用loader时是从右向左的(自带执行顺序) ,所以css-loader要写在右边,具体如下

  rules: [
            
              test: /\\.css$/i,
              use: ['style-loader', 'css-loader'],
            ,]

图片

写图片时要在css样式中写入图片地址
background:url(‘图片地址’)

安装url-loader

指令:npm install url-loader --save-dev

安装file-loader

 指令:npm install file-loader --save-dev(新版本的webpack不用配置file-loader,只需安装就行)

注意

webpack 5的图片加载就不是之前的方式了,官网说了有新的方式,但官方并未详细说明(只说了概念),导致我解决了好长时间的bug,就是不报错但图片不显示(无奈),在网上找了好多方法都不行,最后在费了九牛二虎之力才解决掉了,解决代码如下:

            test: /\\.html$/, // 正则匹配html结尾的文件
	       use:'html-withimg-loader'
	         ,
	        
	       test: /\\.(png|jpg|gif)$/,  // 正则匹配图片文件
	    // 做一个限制，当图片小于多少Byte时，将图片转成base64格式的字符串
	    // 否则用file-loader产生真实的图片
	     use: 
	     loader: 'url-loader', //告诉浏览器使用的是哪个loader,现在用的是url的loader
	     //  esModule: false,
	     options: 
	    limit: 500*1024,//大于或等于 500*1024Byte，按照相应的文件名和路径打包图片
	    name:'images/[name]-[hash:5].[ext]' //images:图片打包的文件夹；
    //[name].[ext]：设定图片按照本来的文件名和扩展名打包，不用进行额外编码
	//[hash:5]：项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，加上hash值的前五位作为图片名避免重名。
                      
                    
                ,

在浏览器显示的图片是将图片转换为base64的格式在显示(图片大小小于limit的时候),图片大小(图片kb*1024)要小于limit的大小,大于的话会报错(需要安装file-loader来解决),安装完成的话,大于limit的话会直接输出原图片格式(jpg等),

上图代码解释

1. test: /.html$/, // 正则匹配html结尾的文件
2. test: /.(png|jpg|gif)$/, 正则匹配图片文件, 做一个限制，当图片小于多少Byte时，将图片转成base64格式的字符串, 否则用file-loader产生真实的图片
3. loader: ‘url-loader’, 告诉浏览器使用的是哪个loader,现在用的是url的loader
4. esModule: false,是否禁止es6语法
5. limit: 5001024,//大于或等于 5001024Byte，按照相应的文件名和路径打包图片
6. name:‘images/[name]-[hash:5].[ext]’ //images:图片打包的文件夹；
   [name].[ext]：设定图片按照本来的文件名和扩展名打包，不用进行额外编码
   [hash:5]：项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，加上hash值的前五位作为图片名避免重名。

小知识

1. 早期dos操作系统的后缀名只能有三个字母(所以当时html后缀叫htm)
2. webpack 打包图片时会生成32hash值,是为了防止重复

上下午遇到了一个大bug,解决了好长时间(很无奈)

注意:

1. 目前不用这个的话一定是注销 esModule: false, 禁止执行ES6语法

2. use 后一定要加[]

3. 安装东西的时候一定要小心安装的版本一定要确认安装的版本和你之前安装的东西兼容,否则就会报错

4. 真实开发中,我们可能对打包的图片名字有一定的要求,img/name.hash:8.ext截取hash值

plugin

介绍:
插件,通常是用于对某个现有的架构进行扩展
webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩

loader和plugin 的区别
loader主要用于某些转换某些类型的模块,它是一个转换器
plugin是插件,它是对webpack本身的扩展,是一个扩展器

plugin的使用过程:
步骤一:通过npm安装需要使用的plugins(某些内置的插件不需要安装)
步骤二: 在webpack.config.js中的plugins中配置插件

打包html 需要使用HtmlWebpackPlugin插件

HtmlWebpackPlugin插件可以为我们做

1. 自动生成一个index.html文件(可以指定模板来生成)
2. 将打包的js文件,自动通过script标签插入到body中
   安装命令npm install html-webpack-plugin --save-dev

注意

1. template表示根据什么模板来生成index.html
2. 我们需要删除之前在output中添加的publicPath属性,否则插入的script标签可能会有问题
3. webpack 5.38.1 兼容的插件版本为5.3.1

总结:
今天学习了loader和部分的plugin,总结下来全是配置和安装,一不小心版本安装错误就会导致版本不兼容,还有最新的版本不向前兼容,所以使用webpack开发时,一定不要选择最新版本的,一定要选择最稳定的版本 ,安装每个插件的版本时最好指定版本,选择你安装的webpack版本兼容的版本,今天实战写的时候出来了一堆bug,就是刚解决完bug又出来一个bug,也让我收获了今后开发的时候一定要细致谨慎,不要因为一点细微的错误,导致整个项目的报错

最后作者创作不易,如果文章对你有帮助的话,记得给个点赞关注