21 / 07 / 11

『webpack』基础篇 - 资源解析

ES6

解析ES6

使用babel-loader

babel的配置文件是：.babelrc

webpack.config.js

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]
    },
    mode: 'production'
}

增加ES6的babel preset配置

创建.babelrc，并在里面写入

安装、配置babel

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

然后创建.babelrc

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

React JSX

增加React的babel preset配置

在之前的基础上添加React支持

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

然后创建.babelrc，添加@babel/preset-react

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

在项目的src目录下创建search.js

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')
)

运行npm run build

在生成的dist文件夹下创建search.html

search.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Page</title>
</head>
<body>
    <div id="root"></div>
    <script src="./search.js" type="text/javascript"></script>
</body>
</html>

CSS

解析CSS

css-loader用于加载.css文件，并且转换成commonjs对象

style-loader将样式通过

webpack.config.js

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                  // style-loader要在css-loader之前引用
                  	'style-loader',
                    'css-loader'
                ]
            },
        ]
    },
    mode: 'production'
}

在之前的基础上添加CSS支持

npm i style-loader css-loader -D

然后创建search.css

search.css

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

修改search.js，引用css

search.js

'use strict'

import React from 'react';
import ReactDOM from 'react-dom'
import './search.css'

class Search extends React.Component {
    render() {
        return (
            <div className="search-text">Search Text</div>
        )
    }
}

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

运行npm run build

解析LESS

less-loader用于将less转换成css

webpack.config.js

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
        ]
    },
    mode: 'production'
}

在之前的基础上添加CSS支持

npm i less less-loader -D

修改search.css为search.less

search.less

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

修改search.less，引用less

search.js

'use strict'

import React from 'react';
import ReactDOM from 'react-dom'
import './search.less'

class Search extends React.Component {
    render() {
        return (
            <div className="search-text">Search Text</div>
        )
    }
}

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

运行npm run build

图片、字体

解析图片

file-loader用于处理文件

webpack.config.js

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|svg|jpg|jpeg|gif)$/,
                use: 'file-loader'
            },
        ]
    },
    mode: 'production'
}

在之前的基础上添加File支持

npm i file-loader -D

在src文件夹下添加一个images文件夹用来放图片，并在images下加入一个图

修改search.js，引用图片

search.js

'use strict'

import React from 'react';
import ReactDOM from 'react-dom'
import './search.less'
import avatar from './images/avatar.png'

class Search extends React.Component {
    render() {
        return (
            <div>
                <img src={avatar}/>
                <div className="search-text">Search Text</div>
            </div>
        )
    }
}

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

运行npm run build

解析字体

file-loader用于处理文件

webpack.config.js

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|svg|jpg|jpeg|gif)$/,
                use: 'file-loader'
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader'
            }
        ]
    },
    mode: 'production'
}

在之前的基础上添加File支持

npm i file-loader -D

在src文件夹下添加一个fonts文件夹用来放图片，并在fonts下加入一个字体文件

修改search.less，引用字体

@font-face {
    font-family: 'FiraCode-Bold';
    src: url('./fonts/FiraCode-Bold.ttf') format('truetype')
}

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

运行npm run build

使用url-loader

url-loader也可以处理图片和字体

可以设置较小资源自动base64

webpack.config.js

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|svg|jpg|jpeg|gif)$/,
                use: 'url-loader',
                options: {
                    limit: 10240
                }
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader'
            }
        ]
    },
    mode: 'production'
}

在之前的基础上添加File支持

npm i url-loader -D

运行npm run build