資源解析

解析 ES6

使用 babel-loader

在專案根目錄下安裝 babel

npm install -D babel-loader @babel/core @babel/preset-env webpack
# 我用 npm 沒裝上 嘗試了很多次
# 最後直接用 yarn add 裝的

babel的配置檔案是: .babelrc

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

因為使用了 ES6，因此要在 .babelrc 裡面新增

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/proposal-class-properties"
  ]
}

解析 React JSX

首先安裝下依賴

npm install react react-dom @babel/preset-react -D

然後把 preset-react 加入到 .babelrc檔案裡面

{
  "presets": [
   "@babel/preset-env",
    "@babel/preset-react"       // 新增了 react 的 jsx 解析
  ],
  "plugins": [
    "@babel/proposal-class-properties"
  ]
}
 

解析 CSS

css-loader 用於載入 .css 檔案， 並且轉換成 commonjs 物件。

npm install style-loader	css-loader -D

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

npm i less less-loader -D

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'
        ]
      }
    ]
  }
};

解析圖片資源

npm i file-loader -D

file-loader 用於處理圖片資源

  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        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-lodaer 也可以處理圖片和字型

npm install url-loader -D

url-loader 相比 file-loader，多了一個 base64 的轉換

可以設定較小資源自動 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: [{
          loader: 'url-loader',
          options: {
            limit:10240
          }
        }]
      }
    ]
  }
};