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大小。