webpack之资源解析

解析ES6

使用babel-loader

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

babel的配置文件是：.babelrc

{
    "presets": [
        "@babel/preset-env" //增加ES6的babel preset配置
    ],
    "plugins": [
        "@babel/proposal-class-properties"
    ]
}

安装依赖，其中i是install的简称，-D是--save--dev的简称

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

解析React JSX

安装依赖

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

babel的配置文件是：.babelrc

{
    "presets": [
        "@babel/preset-env", // 增加ES6的babel preset配置
        "@babel/preset-react" // 增加 React 的 babel preset 配置
    ],
    "plugins": [
        "@babel/proposal-class-properties"
    ]
}

修改search.js文件

'use strict';

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

class Search extends React.Component {
    render () {
        return <div>Search Text</div>
    }
}

ReactDOM.render(
    <Search />,
    document.getElementById('root')
)

解析CSS

安装依赖

 npm i -D style-loader css-loader

css-loader 用于加载 .css 文件，并且转换成 commonjs对象，style-loader将样式通过<style>标签插入到head中。这里有一点需要注意，loaders调用的方式是链式调用的，因此它执行的顺序也是从右到左的

module.exports = {
    module: {
        rules: [
            { 
                test: /\.css$/,
                use: [ 
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
};

创建search.css

.search-text{
    font-size: 20px;
    color: red;
}

在search.js引入search.css

import "./search.css";

解析Less和SaSS

以Less为例，安装依赖less-loader用于将less转换成css，因为less-loader是依赖less的所以less依赖需要一起安装。

npm i -D less-loader less

修改配置

module.exports = {
    module: {
        rules: [
            { 
                test: /\.less$/,
                use: [ 
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
};

解析图片

安装依赖，file-loader用于处理文件

npm i -D file-loader

修改配置

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
};

解析字体

file-loader 也可以用于处理字体
修改配置

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

修改less文件

@font-face {
    font-family: FANGZPPT;
    src: url('./font/FANGZPPT.TTF') format('truetype');
}

.search-text{
    font-family: 'FANGZPPT';
    font-size: 20px;
    color: red;
}

使用url-loader解析图片和字体

url-loader也可以处理图片和字体，可以设置较小资源自动base64。相比file-loader，它还可以做一个小图片和小字体，自动的base64的转换。在url-loader内部也是使用了file-loader的。

 npm i -D url-loader

url-loader接受一个参数，是通过options给loader传参，其中参数limit的意思是如果图片的大小小于这个limit值（下面的例子是10kb），那么webpack打包的话会自动将其转换成base64。

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240 // 单位是字节
                        }
                    }
                ]
            }
        ]
    },
};