webpack第3章 -- 资源解析

最新推荐文章于 2023-07-22 10:19:16 发布

想上天的小鱼

最新推荐文章于 2023-07-22 10:19:16 发布

阅读量148

点赞数

分类专栏： webpack 文章标签： webpack 解析资源打包

本文链接：https://blog.csdn.net/weixin_38629529/article/details/119078438

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在了解webpack基本核心概念之后，来看一下webpack是怎么对资源进行解析的：

一、解析es6

webpack原生代码是支持对js的解析的，但如果有es6的语法，就需要借助babel-loader来实现了。

需要做的配置如下：

babel-loader
babel的配置文件.babelrc（babel-loader依赖babel）
增加babel preset配置

1、安装依赖

npm i @babel/core @babel/preset-env babel-loader --save-dev

2、新建 .babelrc 文件

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

最后的目录如下：

3、修改webpack.config.js文件

'use strict';

const path = require('path');

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

二、解析react

1、安装依赖

npm i react react-dom @babel/preset-react --save-dev

2、修改 .babelrc 文件

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

三、解析css和less

css-loader：加载 .css 文件，将其转化为commonjs对象

style-loader：将样式通过<style>标签插入到<head>中

less-loader：将less转换成css

1、安装依赖

npm i style-loader css-loader --save-dev

2、修改webpack.config.js文件

'use strict';

const path = require('path');

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

这里需要注意的是：loader是通过链式调用的，执行顺序是从右到左的，所以在这里，style-loader放前面，css-loader在后面，后面的先执行。

那么less应该如何解析呢，其实就多了一个loader而已。

1、安装依赖（假设css-loader和style-loader都已安装）

npm i less less-loader --save-dev

2、修改webpack.config.js文件

'use strict';

const path = require('path');

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

四、解析图片和字体

file-loader：处理文件

url-loader：处理图片和字体，可以设置较小的资源自动转成base64

图片和字体可以用同一个loader处理哦！

1、安装依赖

npm i file-loader --save-dev

2、修改webpack.config.js文件

'use strict';

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production',
    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|gif|jpg|jpeg)$/,
                use: 'file-loader'
            },
            {
                test: /.(woff|woff2|eto|ttf|otf)$/,
                use: 'file-loader'
            }
        ]
    }
}

上面的例子用的是file-loader的处理，除了file-loader外，还可以用url-loader进行图片和字体的处理，相比较于file-loader，url-loader可以设置较小的资源自动base64，可以使我们打包出来的文件更小。

首先，还是安装依赖：

npm i url-loader --save-dev

这里以图片为例：

{
   test: /.(png|gif|jpg|jpeg)$/,
   use: [
      {
          loader: 'url-loader',
          options: {
             limit: 10240    // 表示字节
          }
       }
   ]
},

好了，资源的解析就说到这里了，其他的也就大同小异了。

想上天的小鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webpack第3章 -- 资源解析

在了解webpack基本核心概念之后，来看一下webpack是怎么对资源进行解析的：一、解析es6webpack原生代码是支持对js的解析的，但如果有es6的语法，就需要借助babel-loader来实现了。需要做的配置如下：babel-loader babel的配置文件.babelrc（babel-loader依赖babel）增加babel preset配置1、安装依赖npm i @babel/core @babel/preset-env babel-loader --sav
复制链接

扫一扫