在webpack 中，各種資源要引入，要用到module配置,比如css/圖片/字型等等。

例如：

module.exports = {
    entry: './src/app.js',  //這是入口檔案配置
    output: {
        //這裡是出口檔案配置
    },
    module: {
        rules: [
            //而這裡，就是配置各種資源的地方
            {
                test: /\.(jpg|png|gif)/,  
                use: ['file-loader']
            }
        ]
    }
}
 

一般需要用的型別也就是 css樣式、圖片、字型、資料，可以藉助一些loader或者外掛載入優化這些資源。

載入css

載入css最常用到的是css-loader和style-loader，如果需要單獨分離出css檔案webpack4以前可以用ExtractTextWebpackPlugin,webpack4則需要換成MiniCssExtractPlugin外掛

• css-loader的作用是解析以.css結尾的檔案,讓它在就算是在js中引入也能夠使用。官方的說法是：

  css-loader 解釋(interpret) @import 和 url() ，會 import/require() 後再解析(resolve)它們。

• style-loader是引用資源的loader，它會將css引入到head標籤中生成一個<style>

示例流程：

安裝：

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

webpack.config.js

module.exports = {
    entry: './src/app.js',  //這是入口檔案配置
    output: {
        //這裡是出口檔案配置
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}
 

圖片&&字型

圖片和字型都可以用file-loader或url-loader;

• file-loader則是可以
• url-loader的用法和file-loader差不多，準確的說應該它已經包含了file-loader。它們倆的主要區別就是：url-loader在檔案大小（byte）小於指定限制的時候，可以返回一個DataURL.