Webpack 使用url-loader和file-loader打包資源文件

在js中不只能夠經過import引入js文件，還能夠引入圖片、視頻等資源文件，這樣webpack打包時就會把所引入的資源文件也一塊兒打包進來

打包進來的文件會返回一個字符串：即文件的路徑

要作到這一點，須要一個工具，file-loader，使用方法很簡單那

1. 安裝

npm install file-loader --save-dev

2. 配置

{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                //配置公共資源路徑
                publicPath: './',
                //配置輸出路徑
                outputPath: 'images/'
            }
        }
    ]
},

配置其中的 publicPath 與 output 配置中的 publicPath 做用一直，若是二者都設置了，那麼以 output 下的 publicPath 爲準，上面配置最終文件輸出位置爲 /images/[hash].png

 

爲了優化小圖片的加載，能夠使用url-loader將小於必定尺寸的圖片轉成base64

注意：url-loader是依賴於file-loader的，因此這兩個包都必須安裝

{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                //小於這個尺寸的文件會轉成base64，大於的會自動調用file-loader
                limit: 8192
            }
        }
    ]
},