作用

npm install file-loader -D

webpack.config.js

const path = require('path');

module.exports = {
  // 模式：可選為：development, 預設為：production
  mode: 'development',
  // 原始碼資料夾：src
  entry: {
    main: 
 
'./src/index.js' // 入口檔案
  },
  module: {
    rules: [{
        test: /\.jpg$/,
        use: {
            loader: 'file-loader'
        }
    }]
  },
  output: {
    filename: 'bundle.js',  // 檔名
    path: path.resolve(__dirname, 'dist')  // 資料夾
  }
}

index.js

import pic from './lee.jpg';

var img = new Image();
img.src 
 
= pic;

var root = document.getElementById('root');
root.append(img);

打包靜態資源

圖片

file-loader

const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js' // 入口檔案
  },
  module: {
    rules: [{
        test: /\.(jpg|png|gif)$/,
        use: {
            loader: 
 
'file-loader',
            options: { // 配置
              name: '[name].[ext]', // 以原始檔名字及格式輸出
              outputPath: 'images/' // 輸出到images資料夾下
            }
        }
    }]
  },
  output: {
    filename: 'bundle.js',  // 檔名
    path: path.resolve(__dirname, 'dist')  // 資料夾
  }
}

url-loader

url-loader和file-loader都可以打包圖片，區別是url-loader會將圖片以base64打包到js檔案中，當圖片過大時，打包的js檔案也會過大。所以最佳實踐是：將小圖片打包為base64，大於某個值的檔案打包為圖片。如果在配置中不加limit，所有圖片都會打包為base64。
下面案例的意思是：超過10kb的檔案打包為圖片，小於10kb的打包為base64

npm install url-loader --save-dev

const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js' // 入口檔案
  },
  module: {
    rules: [{
        test: /\.(jpg|png|gif)$/,
        use: {
            loader: 'url-loader',
            options: { // 配置
              name: '[name].[ext]', // 以原始檔名字及格式輸出
              outputPath: 'images/', // 輸出到images資料夾下
              limit: 10240 // 超過10kb打包為圖片
            }
        }
    }]
  },
  output: {
    filename: 'bundle.js',  // 檔名
    path: path.resolve(__dirname, 'dist')  // 資料夾
  }
}

字型

file-loader

const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js' // 入口檔案
  },
  module: {
    rules: [{
        test: /\.(eot|ttf|svg)$/,
        use: {
            loader: 'file-loader'          
        }
    }]
  },
  output: {
    filename: 'bundle.js',  // 檔名
    path: path.resolve(__dirname, 'dist')  // 資料夾
  }
}

樣式

loader 的執行順序為從後向前

style-loader css-loader

css-loader會理清多個css檔案之間的引用關係，最後合併為一個。
style-loader會將css樣式掛載到head的style標籤中

npm install style-loader css-loader -D

postcss-loader

為樣式加上廠商瀏覽器字首

npm i -D postcss-loader

const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js' // 入口檔案
  },
  module: {
    rules: [{
        test: /\.(jpg|png|gif)$/,
        use: {
            loader: 'url-loader',
            options: { // 配置
              name: '[name].[ext]', // 以原始檔名字及格式輸出
              outputPath: 'images/', // 輸出到images資料夾下
              limit: 10240 // 超過10kb打包為圖片
            }
        }
    },{
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          'postcss-loader'
        ]
    }]
  },
  output: {
    filename: 'bundle.js',  // 檔名
    path: path.resolve(__dirname, 'dist')  // 資料夾
  }
}

autoprefixer外掛

npm install autoprefixer -D

postcss.config.js

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
}