七、url-loader打包圖片

在loader使用時不須要用require引入，在plugins（插件）才須要使用require引入

file-loader

解決引用路徑的問題，拿background樣式用url引入背景圖來講，咱們都知道，webpack最終會將各個模塊打包成一個文件，所以咱們樣式中的url路徑是相對入口html頁面的，
而不是相對於原始css文件所在的路徑的。這就會致使圖片引入失敗。這個問題是用file-loader解決的，file-loader能夠解析項目中的url引入（不只限於css），根據咱們的配置，
將圖片拷貝到相應的路徑，再根據咱們的配置，修改打包後文件引用路徑，使之指向正確的文件。

url-loader

若是圖片較多，會發不少http請求，會下降頁面性能。這個問題能夠經過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。至關於把圖片數據翻譯成一串字符。
再把這串字符打包到文件中，最終只須要引入這個文件就能訪問圖片了。固然，若是圖片較大，編碼會消耗性能。所以url-loader提供了一個limit參數，小於limit字節的文件會被轉爲DataURl，
大於limit的還會使用file-loader進行copy。

爲何只使用url-loader

有的小夥伴會發現咱們並無在webpack.config.js中使用file-loader，可是依然打包成功了。咱們須要瞭解file-loader和url-loader的關係。url-loader和file-loader是什麼關係呢？
簡答地說，url-loader封裝了file-loader。url-loader不依賴於file-loader，即便用url-loader時，只須要安裝url-loader便可，不須要安裝file-loader，由於url-loader內置了file-loader。
經過上面的介紹，咱們能夠看到，url-loader工做分兩種狀況：

1.文件大小小於limit參數，url-loader將會把文件轉爲DataURL（Base64格式）；

2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。

也就是說，其實咱們只安裝一個url-loader就能夠了。可是爲了之後的操做方便，咱們這裏就順便安裝上file-loader。

 目錄

在entry.js中引入要打包進js的css

import css from './css/entry.css'

webpack.config.js配置文件

// node中的引入路徑模塊
const path = require('path');
// 引入webpack
const webpack = require('webpack');
// 打包html
const htmlPlugin= require('html-webpack-plugin');
// 壓縮js
const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
    //入口文件的配置項
    entry: {
        entry: './src/js/entry.js'
    },
    //出口文件的配置項
    output: {
        //輸出的路徑，用了Node語法
        path: path.resolve(__dirname, 'dist'),
        //輸出的文件名稱
        filename: 'js/bundle.js'
    },
    //模塊：例如解讀CSS,圖片如何轉換，壓縮
    module: {
        rules: [
            {
            // 用於匹配處理文件的擴展名的表達式，這個選項是必須進行配置的；
            test: /\.css$/,
            //   loader名稱，就是你要使用模塊的名稱，這個選項也必須進行配置，不然報錯；
            use: ['style-loader', 'css-loader']
            //   include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）
            // query：爲loaders提供額外的設置選項（可選）
        },
        {
            test:/\.(png|jpg|gif)/ ,
            // 指定使用的loader和loader的配置參數
            use:[{
                loader:'url-loader',
                options:{
                    // 把小於500000B(488kb)的文件打成Base64的格式，寫入JS 小於則幫你複製圖片過去並引入
                    // limit:500000
                    // 如今是以圖片形式引入
                    limit:50,
                    // 指定圖片輸出的目錄
                    outputPath:'images/'
                }
            }]
         }
    ]
    },
    //插件，用於生產模版和各項功能 壓縮打開 熱更新就會失效
    plugins: [
        // new uglify(),
        new htmlPlugin({
            // 是對html文件進行壓縮，removeAttrubuteQuotes是卻掉屬性的雙引號
            minify:{
                removeAttributeQuotes:true
            },
            // 爲了開發中js有緩存效果，因此加入hash，這樣能夠有效避免緩存JS
            hash:true,
            // 是要打包的html模版路徑和文件名稱
            template:'./src/index.html'
           
        })
    ],
    //配置webpack開發服務功能
    devServer: {
        //設置基本目錄結構
        contentBase: path.resolve(__dirname, 'dist'),
        //服務器的IP地址，可使用IP也可使用localhost
        host: 'localhost',
        //服務端壓縮是否開啓
        compress: true,
        //配置服務端口號
        port: 9079
    }
}

package.json依賴項

{
  "name": "xz",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

打包命令

npm start 開發環境 webpack 生產環境