webpack-file-loader

1.什麼是loader?

webpack的本質是一個模塊打包工具, 所以webpack默認只能處理JS文件,不能處理其他文件,
因爲其他文件中沒有模塊的概念, 但是在企業開發中我們除了需要對JS進行打包以外,
還有可能需要對圖片/CSS等進行打包, 所以爲了能夠讓webpack能夠對其它的文件類型進行打包,
在打包之前就必須將其它類型文件轉換爲webpack能夠識別處理的模塊,
用於將其它類型文件轉換爲webpack能夠識別處理模塊的工具我們就稱之爲loader

2.如何使用loader

webpack中的loader都是用NodeJS編寫的, 但是在企業開發中我們完全沒有必要自己編寫,
因爲已經有衆多大神幫我們編寫好了企業中常用的loader, 我們只需要安裝、配置、使用即可

2.1通過npm安裝對應的loader

2.2按照loader作者的要求在webpack進行相關配置

2.3使用配置好的loader

3.fileloader使用

https://www.webpackjs.com/loaders/file-loader/

3.1安裝file-loader

npm install --save-dev file-loader

3.2在webpack.config.js中配置file-loader

module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }
    ]
  }

4.其他常用配置

4.1默認情況下fileloader生成的圖片名就是文件內容的 MD5 哈希值

如果想打包後不修改圖片的名稱, 那麼可以新增配置 name: “[name].[ext]”
其它命名規則詳見: placeholders

4.2默認情況下fileloader會將生成的圖片放到dist根目錄下面

如果想打包之後放到指定目錄下面, 那麼可以新增配置 outputPath: “images/”

4.3publicPath

如果需要將圖片託管到其它服務器, 那麼只需在打包之前配置 publicPath: "託管服務器地址"即可

問題彙總

1.file-loader打包圖片文件時路徑錯誤輸出爲[object-module]的解決方法

由於file-loader新版本默認使用了esModule語法，造成了引用圖片文件時的方式和以前的版本不一樣

解決方法：兩種，如stackflow所說的
1.加後綴

<img src="require('assets/logo.png').default"/>

2.修改配置文件 esModule: false

{
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            esModule: false
                        }
                    }
                ]
}

用file-loader打包字體圖標

先來看在阿里巴巴矢量圖庫下載的字體圖標

可用file-loader來處理，配置如下

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    use:[{
        loader: "file-loader",
        options: {
            name: "[name].[ext]",
            outputPath: "font/",
        }
    }]
}

注意點：在使用時，如何配置了css-loader模塊化，則要注意引入和使用css的寫法