webpack小白入門之資源解析【1-3】

webpack相關的資源解析loader

資源解析：解析ES6語法

首先，安裝三個插件： npm i @babel/core @babel/preset-env babel-loader -D

ps： -D 是 --save-dev 的簡稱 -i 是 install 的簡稱。

在項目根目錄下，新建.babelrc文件，配置以下:

{
  "presets":[
    "@babel/preset-env",  // ES6解析成ES5語法
  ]
}
複製代碼

在 webpack.config.js文件中，module對象中添加一個新的plugin，以下：

'use strict';

const path = require('path')

module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist')
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,     // 匹配js文件  注意這個地方 千萬不能寫成'/\.js$/' 遇到過的坑
        use: 'babel-loader' // 用於將ES6等高級語法解析成ES5語法
      }
    ]
  }
}
複製代碼

資源解析：解析React jsx

首先安裝相關依賴： npm i react react-dom @babel/preset-react -D

在src文件下新建search.js文件用於接下來的測試:

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

import logo from './images/webpack.jpg'
import './search.less'
class Search extends React.Component {

  render() {
    return <div className='search-text'>
      search page
      <img src={logo}/>
    </div>;
  }

}

ReactDOM.render(
  <Search />,
  document.getElementById('root')
);
複製代碼

在.babelrc中增長React的babel preset的配置

{
  "presets":[
    "@babel/preset-env",  // ES6解析成ES5語法
    "@babel/preset-react"  // 增長React的babel preset設置
  ]
}
複製代碼

資源解析：解析css

安裝：npm i style-loader css-loader -D

css-loader用於加載.css文件,而且轉化成commonjs對象，style-loader將樣式經過<style>標籤插入到head中。

webpack.config.js

'use strict';

const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist')
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,     // 匹配js文件
        use: 'babel-loader' // 用於將ES6等高級語法解析成ES5語法
      }, {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']  // 注意 解析順序是從右往左的，先解析css-loader 後解析style-loader將css插入dom中。 
      }
    ]
  }
}
複製代碼

資源解析：解析less

less-loader 用於將less轉換成css，安裝 npm i less less-loader -D

webpack.config.js

'use strict';

const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist')
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,     // 匹配js文件
        use: 'babel-loader' // 用於將ES6等高級語法解析成ES5語法
      },
      {
        test: /\.css$/,
        use: [ // 注意 解析順序是從右往左的，先解析css-loader 後解析style-loader將css插入dom中。 
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'    // 用於解析less 
        ]
      }
    ]
  }
}
複製代碼

資源解析：解析字體。

安裝 npm install file-loader -D

在search.less中添加字體：

@font-face {
  font-family: 'SourceHanSerifSC-Heavy';
  src: url('./font-family/SourceHanSerifSC-Heavy.otf') format('truetype')
}
.search-text {
  text-align: center;
  font-size: 20px;
  color: red;
  font-family: 'SourceHanSerifSC-Heavy';
}
複製代碼

而後在webpack.config.js中配置：file-loader

'use strict';

const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist')
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,     // 匹配js文件
        use: 'babel-loader' // 用於將ES6等高級語法解析成ES5語法
      },
      {
        test: /\.css$/,
        use: [ // 注意 解析順序是從右往左的，先解析css-loader 後解析style-loader將css插入dom中。 
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'    // 用於解析less 
        ]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,  // 解析圖片和字體
        use: 'file-loader'
      }
    ]
  }
}
複製代碼

資源解析：解析圖片。

url-loader 安裝 npm i url-loader -D

以下圖所示，在沒有使用url-loader以前, search.js大小是125KiB，圖片大小是16.2KiB

配置url-loader

webpack.config.js

'use strict';

const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist')
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,     // 匹配js文件
        use: 'babel-loader' // 用於將ES6等高級語法解析成ES5語法
      },
      {
        test: /\.css$/,
        use: [ // 注意 解析順序是從右往左的，先解析css-loader 後解析style-loader將css插入dom中。 
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'    // 用於解析less 
        ]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader:'url-loader',
            options:{
              limit:20480 // 若是一張圖片小於20k webpack將自動將圖片轉爲base64打包進文件，若是超過這個大小，將單獨打包。
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: 'file-loader'
      }
    ]
  }
}
複製代碼

當配置了url-loader以後,webpack已經將大小爲16.2KiB大小的圖片（小於咱們的限制），打包進search.js中了,search.js從以前的125kib大小變成了147kib，大約增長了16.2kib大小。