Webpack解析文件和资源

越陌度阡

发布于 2023-01-03 08:44:29

4940

发布于 2023-01-03 08:44:29

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

1. 解析 ES6

1. 安装依赖

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

2. 配置babel

babel的配置在.babelrc文件里面，要解析资源，需要进行相关配置。

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

3. 配置webpack

在webpack配置文件的moudle里面添加解析规则。

'use strict';
const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    mode: 'development',
    module: {
        rules: [
            // 解析ES6的规则
            {
                test: /.js$/,
                use: 'babel-loader'
            }
        ]
    }
};

2. 解析 React JSX

1. 安装依赖

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

2. 配置babel

babel的配置在.babelrc文件里面，要解析资源，需要进行相关配置。

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

3. 解析 CSS

webpack解析css文件流程，首先通过css-loader 加载 .css ⽂件，并且转换成 commonjs 对象，然后通过style-loader 将样式通过<style>标签插入到head中。

1. 安装依赖

npm i style-loader css-loader -D

2. 配置webpack

在webpack配置文件的moudle里面添加解析规则。

'use strict';
const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    mode: 'development',
    module: {
        rules: [

            {
                test: /.js$/,
                use: 'babel-loader'
            },
            // 解析CSS的规则
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ]
    }
};

需要注意的是，由于loader是链式调用，执行顺序也是从右到左，所以在填写规则时，要先写style-loader，然后再写css-loader，实际在执行时，会通过css-loader去处理，然后将处理的规则传递给style-loader。

4. 解析 Less

要想解析less，首先要通过less-loader 将 less 转换成 css。

1. 安装依赖

npm i less less-loader -D

2. 配置webpack

在webpack配置文件的moudle里面添加解析规则。

'use strict';
const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    mode: 'development',
    module: {
        rules: [

            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // 解析less的规则
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
        ]
    }
};

5. 解析图⽚

1. 安装依赖

npm i file-loader -D

2. 配置webpack

在webpack配置文件的moudle里面添加解析规则。

'use strict';
const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    mode: 'development',
    module: {
        rules: [

            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            // 解析图片的规则
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'file-loader'
                    }
                ]
            },
        ]
    }
};

6. 解析字体

1. 安装依赖

npm i file-loader -D

2. 配置webpack

在webpack配置文件的moudle里面添加解析规则。

'use strict';
const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    mode: 'development',
    module: {
        rules: [

            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'file-loader'
                    }
                ]
            },
            // 解析字体的规则
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader'
            }
        ]
    }
};

7. 使⽤ url-loader解析图片

url-loader 也可以处理图⽚，不同的是，它可以将较⼩资源⾃动转换为base64格式。

1. 安装依赖

npm i url-loader -D

2. 配置webpack

在webpack配置文件的moudle里面添加解析规则。

'use strict';
const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    mode: 'development',
    module: {
        rules: [

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

            // 用url-loader去解析图片
            // 对于小于10240（10k）的图片自动转换base64
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240
                        }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader'
            }
        ]
    }
};

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-01-02，如有侵权请联系 cloudcommunity@tencent.com 删除

webpack