webpack4.x打包圖片文件遇到效果不顯示的問題（file-loader加載遇到的狗血問題）

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+鼠標滾輪向上向下” 實現放大縮小）