file-loader的使用

Posted on Edited on In Views: Disqus:

 

來看一下什麼時候會用到 file-loader。

 

一個範例檔案結構如下

 

index.html 內容為

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="main.js"></script>
</head>

<body>

</body>

</html>

 

index.js 的內容為

const theImg = require("./img.css");

 

img.css 的內容為

body {
    background-image: url("./Logo.png");
}

 

webpack.config.js 內容為

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }
};

 

在執行編譯前，由於有用到 style-loader、css-loader，所以記得要先安裝好相關套件，

$ npm i --save-dev style-loader

$ npm i --save-dev css-loader

接下來就開始編譯 $ npx webpack，

但是卻發生下列錯誤訊息

錯誤是發生在 ./src/Logo.png 這一段，但這種錯誤訊息似乎也猜不出如何解？

上網找資料後，發現還要安裝 file-loader 這套件，

重點來了，原來 file-loader 使用時機是在這時候。

好，先來安裝 file-loader 套件試試看，

$ npm i --save-dev file-loader

然後 webpack.config.js 改成如下內容(黃底部份)

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

 

再次編譯 $ npx webpack，這次終於過了，並自動於 dist 資料夾下面產生

main.js 檔與 自動 hash 出檔名的 .png 檔，如下圖

 

參考資料：

Loading Images