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
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue