webpack的讲解

Posted 2022-12-09 stay_少年与梦

file-loader

作用

把识别出的资源模块，移动到指定的输出目录，并且返回这个资源在输出目录的地址(字符串)
也可以识别图片，将图片显示在页面上

步骤

1.我们想要达到效果，首先需要安装

npm install --save-dev file-loader

2.安装完成之后，在你的配置文件中使用

webpack.config.js 中 代码

 
module.exports=
    mode:"production",
    entry:
        'index':"./src/index.js"
    ,
    output:
        path:path.resolve(__dirname, "dist"),
        filename:"[name].js"
    ,
    module:
        rules:[
            
            
                test: /\\.(png|jpe?g|gif)$/i,
                use:'file-loader'
            

        ] 
    
 

只写这些你会发现页面中没有正常显示出图片，会输出一个地址，这个地址就是你的图片（如下图）

3.index.js代码

import ss from './data/src.jpg';

console.log(ss);

4.想要显示图片，我们还需要在index.js中添加东西，添加后为

import ss from './data/src.jpg';
let img = new Image();
img.src = ss;
document.body.appendChild(img);
console.log(ss);

这时我们可以看到页面中（效果图）

5.只是console输出依然是一个地址，我们想要修改这个值，我们需要回到
webpack.config.js 中将这一块的内容变为

 
                test: /\\.(png|jpe?g|gif)$/i,
                use:
                    
                    loader:'file-loader',
                    options:
                        //[path]:路径
                        //[name]:资源模块的名称
                        //.[ext]:资源模块的后缀
                        name: '[path]_[name].[ext]', //占位符，可以不用写
                        //设置打包后的文件位置
                        //相对的是全局的outputPath路径
                        outputPath:'/image',
                        //设置打包后的文件返回的url（路径）
                        publicPath:'./dist'
                    

placeholder 是占位符

现在我们输出的内容为（效果图）

这就是图片打包的内容

url-loader

作用

可以处理 file-loader 所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成 base64 格式的字符串，并打包到 js 中，对⼩体积的图片⽐较合适，⼤图⽚则不合适。

过程

1.安装

npm install --save-dev url-loader

在终端中安装

2.使用

在webpack.config.js中使用

         test: /\\.(png|jpe?g|gif)$/i,
         use:
             
             loader:'url-loader',
             options:
                 //[path]:路径
                 //[name]:文件名
                 //.[ext]:后缀
                 name: '[path][name].[ext]',
                 //设置文件返回的路径
                 publicPath:'./dist',
                 //小于100字节转成base64格式
                 limit:100 //这里可以设置字节大小
                 
                    

具体图片

（效果图）

拓展内容

base64是网络上最常见的用于传输8Bit字节码的编码方式之一，它是一种基于64个可打印字符来表示二进制数据的方法。

base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。采用base64编码具有不可读性，需要解码后才能阅读。base64由于以上优点被广泛应用于计算机的各个领域。

file-loader和url-loader的共同点和不同点

共同点：都可以将图片进行打包
不同点：url-loader可以处理 file-loader 所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成 base64 格式的字符串，并打包到 js 中，对⼩体积的图片⽐较合适，⼤图⽚则不合适。
而file-loader没有这一效果

css-loader

1.作用

分析css模块之间的关系，并合成一个css

2.安装

npm install --save-dev css-loader

3.使用

3-1 先创建一个名为cs.css(自定义名字)的文件放在src目录下

3-2 在cs.css中随意写点样式

3-3我们在index.js中引入cs.css文件

import cs from './cs.css'

console.log(cs)

3-4 在webpack.config.js中写

		
            test: /\\.css$/,
            use:'css-loader'
          

3-5执行打包命令，在页面中打开会看到

输出的是一个数组

3-6我们现在将输出的内容下标添加到index.js代码中

3-7现在我们再次运行打包后打开页面时，是这个样子

3-8 现在我们已经可以输出了，现在我们想办法让它显示在页面上

我们可以在index.js中添加

let sty = document.createElement('style');//创建一个style标签
sty.innerhtml=cs[0][1];//让它输出到页面上
document.head.appendChild(sty);//添加到head标签里

3-9再来打包运行会发现已经达到了我们想要的效果

style-loader

1.作用

把 css-loader 生成的内容，用 style 标签挂载到⻚面的 head 中

2.安装

npm install --save-dev style-loader

3.使用

前3步和css-loader的使用步骤是一样的
3-4 到webpack.config.js中的写

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

同一个任务的 loader 可以同时挂载多个，处理顺序为：从右到左，也就是先通过 css-loader 处理，然后把处理后的 css 字符串交给 style-loader 进行处理

注意

use: ["style-loader", "css-loader"] 使用多个时，它的执行顺序是从后往前执行的，这个需要特殊注意！！！！

3-2 我们打包后打开页面，会发现我们的样式已经添加
（效果图）

css-loader和style-loader的共同点和不同点

css-loader：使用时要在index.js自己写上相应的js语法，才能达到效果
style-loader：想要使用必须先安装css-loader，即两个是相互作用

单独使用时

css-loader里面包含的东西

rules: [
  ...,
	
		test: /\\.css$/,
    use: 
      loader: "css-loader",
      options: 
  			// 是否启用/禁用 url() 处理
  			url: true,
  			// 是否启用/禁用 @import 处理
  			import: true,
        // 是否启用/禁用 Sourcemap
        sourceMap: false
      
    
	
]

如果我们在css文件中引入一个图片，这里就可以设置是否需要启用

style-loader里面包含的内容

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

总结

今天主要讲了loader中的一些配置，讲解了如何安装和使用
file-loader：资源文件的打包
url-loader：图片的打包
css-loader：css的打包
style-loader：style的打包
以及注意事项
url-loader可以处理 file-loader 所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成 base64 格式的字符串，并打包到 js 中，对⼩体积的图片⽐较合适，⼤图⽚则不合适。
需要挂载多个loader时，执行顺序是从后往前的，这个是特别要注意的。

今天先讲到这里，如果觉得写的不错，记得点赞，写的不好的地方，希望大家可以积极评论。