Webpack5资源解析

Posted 2022-12-07 IT人.阿标

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webpack5资源解析相关的知识，希望对你有一定的参考价值。

文章目录

解析ES6

webpack本身是支持原生js的解析，但是对于一些es6的语法特效，webpack原生是并不能了解到的，因此需要借助于babel-loader

babel的配置文件：

.babelrc

babel具体使用步骤

首先需要安装babel，以及相关依赖

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

新增.babelrc配置文件，内容如下


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

修改webpack.config.js文件

'use strict';

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = 
......
  module: 
        rules: [
                                        //Loader配置
                test: /\\.test$/, use: 'raw-loader'
            ,
            
                test: /\\.js$/,
                use: 'babel-loader'
            
        ]
    ,
......

配置完成以后执行npm run build即可完成ES6的语法特性解析打包。

解析CSS

在webpack里面我们要想解析css，我们需要使用到css-loader，css-loader主要作用就说用于加载.css文件，并且装换成commonjs对象，插入到js代码里面去。然后接下来还需要通过style-loader将样式通过style标签插入到head中。这样的话样式才能展示效果。

具体步骤

首先需要安装style-loader，css-loader
```
npm i style-loader css-loader -D
```

配置webpack.config.js

 module: 
        rules: [
            
                test: /\\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            
        ]
    ,

注意：上面style-loader和css-loader，顺序不可变。因为loader的调用是链式调用，执行顺序也是从右到左的因此需要先写style-loader在写css-loader。这样的话他去执行的时候会先css-loadeer解析CSS文件，然后在讲解析好的CSS传递个style-loader。

配置完成以后，执行webpack打包脚本，npm run build，即可将css打包到产物。

解析Less和SaSS

想要解析Less，我们需要借助于less-loader，less-loader作用就是将less转换成css。

具体步骤

首先需要安装less，less-loader
```
npm i less less-loader -D
```

配置webpack.config.js

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

解析图片

在webpack里面要想解析图片，需要用到file-loader或者url-loader，其中url-loader也是基于file-loader实现的。

使用步骤：

首先需要安装url-loader file-loader
```
npm i url-loader file-loader -D
```

配置webpack.config.js

module: 
        rules: [
            
                test: /.(png|jpg|gif|jpeg)$/,
                use: 
                    loader: "url-loader",
                    options: 
                        limit: 10240 //不超过10K时，将其转化为base64
                    
                
            
        ]
    ,

解析字体

解析字体我们这里需要用到file-loader

使用步骤

首先需要安装file-loader
```
npm i file-loader -D
```

配置webpack.config.js

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

以上是关于Webpack5资源解析的主要内容，如果未能解决你的问题，请参考以下文章

Webpack5资源解析

webpack拓展篇（六十七）：webpack5 新特性解析

Webpack5静态资源内联

webpack5处理其他资源