webpack 從基礎到進階 3

資源解析： 解析 css

• css-loader 用於加載.css 文件， 而且轉換成 commmon.js 對象
• style-loader 將樣式經過<style/> 標籤插入到 head 中

const path = require('path');

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

複製代碼

資源解析 ： 解析 less 和 sass

• less-loader 用於將 less 轉換成 css

const path = require('path');

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

複製代碼

資源解析： 解析圖片

• file-loader 用於處理文件

const path = require('path');

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

複製代碼

資源解析： 解析字體

• file-loader 也能夠用來處理字體

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    + module: {
    +     rules: [
    +         {
                  test: /\.(woff|woff2|eot|ttf|otf)$/,
                  use: [
                  'file-loader',
                  ]
              }
          ]    
    }
}

複製代碼

資源解析： 使用 url-loader

• url-loader 也能夠處理圖片和字體
• 能夠設置較小資源自動 base64

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    + module: {
    +     rules: [
    +         {
                  test: /\.(png|svg|jpg|gif)$/,
                  use: [
                  'url-loader',
                  options:{
                    limit: 10240
                  }
                  ]
              }
          ]    
    }
}

複製代碼

webpack 中的文件監聽

• 文件監聽是在發現源碼發生變化時， 自動從新構建出新的輸出文件

webpack 開啓監聽模式， 有兩種方式：

• 啓動 webpack 命令時， 帶上 --watch 參數
• 在配置 wenpack.config.js 中設置 watch : true