loader配置

解析ECMAScript

尽管我们在前面的例子中，没有配置babel-loader，照样可以打包。

我们可以通过配置babel-loader可以将ES6代码转化为ES5，我们首先需要安装：

npm i @babel/core @babel/preset-env babel-loader -D

让代码对js都预先使用babel解析

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.js$/, use: 'babel-loader'
    }]
  }
}

balbel-loader会去项目文件夹下寻找 .babelrc 文件用于确认使用何种规则来解析ECMAScript

{
    "presets": [
        "@babel/preset-env"
    ]
}

执行 npm run build 成功，可见配置生效了，let变成了var，箭头函数变成了普通函数。

注：尽管我们使用了babel-loader，但是一些数据结构比如Promise和Set，在转换后对代码中仍旧保留了原始写法。如果我们想让低版本浏览器也正常工作，需要安装 @babel/polyfill，并且在使用这些数据结构的代码中引入 import '@babel/polyfill;，这样一来打包的文件就会打了很多。

参考提交：100dc90

解析React JSX

要解析React JSX，需要安装：

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

并在 .babelrc 中增加配置项

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

然后编写一个使用React的例子

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
class Search extends React.Component {
  render() {
    return <div>Search Component</div>
  }
}
ReactDOM.render(
  <Search/>,
  document.getElementById('root')
)

最后修改dist/html，增加一个用于挂载的#root。
注：后续的提交，因为dist目录被忽略提交，checkout以后要运行需要手动添加 dist/index.html。

<div id="root"></div>

执行 npm run build后，打开 dist/index.html 可以看到内容被成功渲染了。

参考节点：260ab8a

解析CSS

需要被依赖的两个loader，分别是 css-loader，style-loader

• css-loader 用于解析.css文件，转化成commonjs对象
• style-loader 将样式通过<style>标签插入到head中

安装它们后，在配置文件中增加对css文件的rule

npm i css-loader style-loader -D

{
  test: /\.css$/, use: ['style-loader','css-loader']
}

注：loader的解析顺序是从右到做，即先使用css-loader读取css文件，再用style-loader插入。

参考节点：2976d37

解析Less、Sass

解析less，需要安装后在loader的use中中增加一个less-loader即可

npm i less less-loader -D

{
  test: /\.less$/, use: ['style-loader','css-loader', 'less-loader']
}

解析scss也是同理，安装后在loader的use中增加sass-loader的处理即可

npm i sass-loader node-sass -D

{
  test: /\.sass$/, use: ['style-loader','css-loader', 'sass-loader']
}

扩展：https://nordschool.com/css-in-react/ 总结了在React中使用CSS的若干中方式。

参考节点：f6f2213

解析图片

npm install file-loader -D

{
  test: /\.(png|jpe?g|gif)$/i, loader: 'file-loader'
}

拷贝图片logo.jpg到src文件夹下，然后在 search.js中引入使用

// 省略了无关代码
import logo from './logo.jpg';
class Search extends React.Component {
  render() {
    return <div>
      <img src={logo} />
      Search Component
      </div>
  }
}

参考节点：3eef4d0

解析字体

仍旧使用file-loader来解析字体，先在自己项目文件夹下面寻找到一个字体文件 fontawesome-webfont.woff 拷贝到src目录下，然后修改css引用该字体文件：

@font-face {
  font-family: 'awesome';
  src: url("./fontawesome-webfont.woff");
}
div {
  font-size: 20px;
  color: red;
  font-family: 'awesome';
}

然后在配置文件中增加对字体文件格式的解析：

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader']
}

注：随便拷贝的图标字体未必会有效果，因为必须出现对应字符才能到效果。

使用url-loader

url-loader内部也是使用的file-loader，可以处理图片和字体，可以针对较小资源自动base64

同样是加载图片，我们尝试用url-loader加载，并将大小比10Kb小的图片都加载为base64

{
  test: /\.(png|jpe?g|gif)$/i,
  use: [{
    loader: 'url-loader',
    options: {
      limit: 10240
    }
  }]
}

执行打包命令，可以发现没有打包出来图片文件，而是js文件大小变大了。