file-loader加载遇到的狗血问题-webpack4.x

最近在学习vue,看的b站视频学习,b站里面用的是webpack3.6,而我用的是webpack4.43.0版本的,在webpack4.x版本和3.x版本还是挺有区别的,比如配置,打包方式就不一样。在学习到图片文件的打包配置时,遇到了狗血问题,现阶段我还是说一下webpack4.x的操作步骤,怎么样执行到打包图片文件这个地方,遇到了什么问题?(当图片大于limit限制,启动file-loader加载生成文件,生成成功但是页面没有效果,同时配置file-loader影响了url-loader以base64的方式加载图片的显示)

执行步骤

1、安装node.js环境

首先安装node.js环境,切换仓库为阿里云仓库
参考文章:vue环境搭建
这步,可以安装到该文章 (四、设置环境变量(非常重要))这一步即可,也就是安装好node.js和配置好淘宝镜像
切换为淘宝镜像后,所有的npm指令全部可以替换为cnpm

2、安装webpack

先安装webpack(全局安装):
安装最新版
npm install --global webpack
安装特定版
npm install --global webpack@<version>
比如:npm install --global webpack@3.6

webpack 4+ 版本,你还需要显式的安装 CLI
npm install --global webpack-cli

配置了阿里仓库的直接将npm改为cnpm
局部安装webpack

局部安装的话就需要进入到你的vue项目,才能进行安装
比如我这里有个项目demo结构暂时是这样的
在这里插入图片描述
那么我们要先进入到项目根目录下,也就是webpack.config.js同级目录下,
在这里插入图片描述
执行如下命令:

安装最新版
>  npm install --save-dev webpack

安装特定版
>  npm install --save-dev webpack@<version>
比如:npm install --save-dev webpack@3.6

webpack 4+ 版本,你还需要显式的安装 CLI
>  npm install --save-dev webpack-cli

配置了ali仓库的直接将npm换成cnpm
* --save-dev表示在局部生成一个包管理文件夹nodel_model,并且下载的node依赖都
* 存在这个局部的文件夹中,这就是和全局的不同,全局用--global指定的,下载的
* 依赖存在于我们全局设置的模块文件夹中

由于我直接就是下载的最新版,也就是webpack4.43.0版本,所以后续执行可能略有不同
执行后会在同级目录生成一个node_modules文件:
在这里插入图片描述

3、新建webpack.config.js

webpack.config.js有一些基本的配置

const path = require('path') //引入node相关的模块的包,path是个模块,因为下面要指定导出路径时需要的是绝对路径,需要用到这个模块

module.exports = {
    entry: "./src/main.js", //需要打包导出的文件
    output: { //打包导出后的文件路径
        /*resolve()方法可以对两个路径进行拼接,__dirname 是node上下中一个全局变量,可以获取当前目录所在路径,dist就是我们要导出的路径
          理解:__dirname获取本文件(webpack.config.js)的所在路径,是个绝对路径,然后和后面的dist进行拼接,也就指定到了本文件同级目录下的dist文件夹中了*/
        path: path.resolve(__dirname, "dist"),
        filename: "build.js", //打包导出的文件名
        /*会给所有url的前面加上配置的这个值,比如有个元素的background-image的url为../img/huluwa.jpg,那么最后打包生成了个文件,
          图片生成重命名后的文件名为1321561016516dfasds.jpg,那么最后执行文件路径时,如果没有配置就是url("1321561016516dfasds.jpg"),
          加上了之后就是url("dist/1321561016516dfasds.jpg"),这样才能正确找到文件
         */
        publicPath: "./dist/"
    },
    mode: 'development', //指定导出的版本,4.x版本的webpack需要指定,不然就会自动使用production(生产环境)版本,这里指定为开发版本,也就是生成文件不会压缩
    module: {
        rules: [
            {
                test: /\.css$/,//正则匹配资源
                //css-loader只负责将css文件进行加载
                //style-loader负责将样式添加到dom
                //使用多个loader时,数组中加载依赖是从右往左加载,这里style-loader必须在css-loader前面
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"},
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // style-loader负责将样式添加到dom
                }, {
                    loader: "css-loader" // css-loader只负责将css文件进行加载
                }, {
                    loader: "less-loader" // 编译less文件为css
                }]
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载的图片小于limit时,会将图片编译成base64字符串的形式,
                            //当图片大于这个limit,会用file-loader进行加载
                            limit: 13000,
                            //在webpack4.x必须显式的指定fallback备用方法,这里指定为file-loader
                            fallback: require.resolve('file-loader'),
                            encoding: "base64",
                            //这个表示在打包生成的文件的名字,如果不配置这个,会根据hash生成一个名字,这个配置就是自定义命名规则
                            //这个表示会在输出文件夹dist下创建一个img文件夹,所有的文件会以 “原名字+hash值8位+文件扩展名”生成最终的文件来供使用
                            name: "img/[name].[hash:8].[ext]",
                        },
                    },
                    /*上面指定了fallback,是必须的,在webpack4.x下,不要配置下面这个file-loader,因为这里我遇到了坑,先是配置了上面的
                    url-loader,然后配置了下面的file-loader,最后图片文件是按照配置生成了,但是却不引用,没生效,页面没有加载,同时配置了下面这个
                    还影响了页面中base64显示图片,不会加载出来,但是当我把下面这个配置删除时,执行npm run dev打包时却显示找不到file-loader,搞了
                    很久,才试出来,需要在url-loader中配置fallback来显示指定备用方法指向file-loader,这样才有效果,同时,上面指定fallback,也不要
                    配置下面这个file-loader,否则依然不起效果
                     */
                    // {
                    //     loader: 'file-loader',
                    //     options: {
                    //         //这个表示在打包生成的文件的名字,如果不配置这个,会根据hash生成一个名字,这个配置就是自定义命名规则
                    //         //这个表示会在输出文件夹dist下创建一个img文件夹,所有的文件会以 “原名字+hash值8位+文件扩展名”生成最终的文件来供使用
                    //         name: "img/[name].[hash:8].[ext]",
                    //         publicPath: './dist/',
                    //     },
                    // },
                ]
            },
        ]
    }
}

/*在控制台中,也就是cmd终端进入到当前目录,输入如下命令即可打包,会打包成上面mode指定版本的形式:
   > webpack
*/

4、通过命令生成package.json

在控制台(cmd终端)进入到项目中,也就是项目src同级目录
通过命令生成package.json:

>  npm init

在这里插入图片描述
这样就生成了package.json文件
在这里插入图片描述
记得加上下面这个,因为默认dev、build生成是没有的,需要我们指定局部执行脚本命令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode deveplopment",
    "build": "webpack --mode production"
  },

5、安装下载依赖

打包CSS文件必须要有loader

执行如下命令:
进入到项目中,也就是项目src同级目录,也是pakage.json同级目录,输入如下命令
安装cssloader、styleloader

npm install --save-dev css-loader
npm install style-loader --save-dev

配置了阿里仓库的直接npm改为cnpm

webpack.config.js配置,在文件中加上如下关于loader的配置,上面我贴出来的webpack.config.js已经配置了,可以具体去看

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        //css-loader只负责将css文件进行加载
        //style-loader负责将样式添加到dom
        //使用多个loader时,是从右往左
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}
打包less文件必须要有loader

执行如下命令:
进入到项目中,也就是项目src同级目录,也是pakage.json同级目录,输入如下命令
要想打包less文件必须要有相应的loader
进入到项目中,也就是项目src同级目录,也是pakage.json同级目录,输入如下命令
安装lessloader

npm install --save-dev less-loader less  

配置了阿里仓库的直接npm改为cnpm

webpack.config.js配置,在文件中加上如下关于loader的配置,上面我贴出来的webpack.config.js已经配置了,可以具体去看

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
			//css-loader只负责将css文件进行加载
        	//style-loader负责将样式添加到dom
			//less-loader负责将less编译成css
            use: [
				{loader: "style-loader" }, 
				{loader: "css-loader" }, 
				{loader: "less-loader"}
			]
        }]
    }
};
打包图片文件必须要有loader

要想打包图片文件必须要有相应的loader
进入到项目中,也就是项目src同级目录,也是pakage.json同级目录,输入如下命令:
安装file-loader、url-loader

npm install --save-dev url-loader
npm install --save-dev file-loader

配置了阿里仓库的直接npm改为cnpm

webpack.config.js配置,在文件中加上如下关于loader的配置,publicPath配置和module中url-loader和file-loader的配置

module.exports = {
	......
	
    output: { 
        ......
        /*会给所有url的前面加上配置的这个值,比如有个元素的background-image的url为../img/huluwa.jpg,那么最后打包生成了个文件,
          图片生成重命名后的文件名为1321561016516dfasds.jpg,那么最后执行文件路径时,如果没有配置就是url("1321561016516dfasds.jpg"),
          加上了之后就是url("dist/1321561016516dfasds.jpg"),这样才能正确找到文件
         */
        publicPath: "./dist/"
    },
    module: {
        rules: [
        	......
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载的图片小于limit时,会将图片编译成base64字符串的形式,
                            //当图片大于这个limit,会用file-loader进行加载
                            limit: 13000,
                            //在webpack4.x必须显式的指定fallback备用方法,这里指定为file-loader
                            fallback: require.resolve('file-loader'),
                            encoding: "base64",
                            //这个表示在打包生成的文件的名字,如果不配置这个,会根据hash生成一个名字,这个配置就是自定义命名规则
                            //这个表示会在输出文件夹dist下创建一个img文件夹,所有的文件会以 “原名字+hash值8位+文件扩展名”生成最终的文件来供使用
                            name: "img/[name].[hash:8].[ext]",
                        },
                    },
                ]
            },
        ]
    }
}

6、执行打包

执行该命令:npm run xxx ,

>  npm run build

配置了阿里仓库的直接npm改为cnpm
相当于执行的是:
xxx指代的就是package.json中scripts中的命令,执行哪个就指代哪个,比如dev、test
前端模块化雏形5

xxx指代的就是这一块:
在这里插入图片描述

问题点-此次遇到坑的地方

这个坑就是上述执行步骤中的第5点下载安装依赖中的打包图片文件必须要有loader这一步
按照教程webpack3.6版本的操作,这步webpack.config.js在配置时,配置是这样的:
在这里插入图片描述
这样的话,因为我是webpack4.43.0版本,所以,没有效果,会提示缺少file-loader:
在这里插入图片描述
但是我在上面已经将url-loader和file-loader都已经安装了,却还报这个错误
所以,我就加入了file-loader配置:
在这里插入图片描述
没有报错了,但是打开页面却没有效果,并没有加载图片,同时,由于配置了file-loader,我的url-loader默认以base64加载图片也失效了。
后面经过反复修改,最终能够实现效果的是这个配置:
在这里插入图片描述
也就是要在url-loader配置中指定显示配置fallback,指向file-loader,虽然官网说默认值就是file-loader,但是,我这里测得如果没有显示指定就会报错,同时配置了url-loader再配置file-loader会导致整个url配置的部分失效,也就是不能以base64的方式加载图片,因为在页面显示的时候,格式莫名错误,同时,如果url-loader这里不指定fallback,其中name设置也是不能够生效的,这是官网的说明,但是并没卵用
在这里插入图片描述
所以这就是再配置url-loader和file-loader遇到的坑,记一笔。
webpack中文地址:https://www.webpackjs.com/
webpack英文地址https://webpack.js.org/
中文地址的说明稍显滞后
此次leader参考地址:
中文地址:https://www.webpackjs.com/loaders/url-loader/
英文地址:https://webpack.js.org/loaders/url-loader/

问题点操作效果演示(可以放大浏览器 “CTRL+鼠标滚轮向上向下” 实现放大缩小)

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐