种星星
0%

使用webpack解析一些常见资源

发表于 阅读次数： Valine：

本文介绍了如何使用webpack解析ES6、JSX、CSS等资源

解析ES6

解析es6需要使用到babel，同时需要使用babel-loader
首先，先配置babel配置文件.babelrc：

1
2
3
4
5
6
7
// .babelrc
{
    "presets": [
        "@babel/preset-env"  // 增加ES6的babel preset配置
    ],
    "plugins": []
}

.babelrc文件中的plugins字段，可以理解为一个plugin对应一个功能，
而presets则是多个plugin的集合

接着需要在webpack.config.js中增加相关loader的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
// webpack.config.js
module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]
    },
    // ...
}

然后安装相关依赖：

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

安装完毕重新编译下即可。

解析React JSX

首先，先配置babel配置文件.babelrc：

1
2
3
4
5
6
7
8
// .babelrc
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react" // 增加react jsx的babel preset配置
    ],
    "plugins": []
}

接着在webpack.config.js中修改babel-loader的校验规则：

1
2
3
4
5
6
7
8
9
10
11
12
13
// webpack.config.js
module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.jsx?$/,  // js、jsx文件
                use: 'babel-loader'
            }
        ]
    },
    // ...
}

然后安装相关依赖：

1
npm i @babel/preset-react -D

安装完毕即可使用react的jsx相关语法。

解析CSS

解析CSS需要用到两个loader：

  1. css-loader加载css文件，并转换为commonJS对象
  2. style-loader将样式通过<style>标签插入到head中

在webpack.config.js中修改loader配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
// webpack.config.js
module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    // ...
}

需要注意的是，loaders链式调用，从右到左，所以先写style-loader，再写css-loader

然后安装相关依赖：

1
npm i style-loader css-loader -D

解析Less、Sass

Less和Sass的解析步骤与CSS类似，只需要多一步将Less/Sass转换为CSS即可。
配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// webpack.config.js
module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.s[ac]ss$/, // sass和scss文件
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    // ...
}

注意，less-loader需要一同安装less；sass-loader需要一同安装node-sass

解析图片、字体等

解析图片、字体等文件，可使用file-loader或url-loader。
url-loader底层也是调用的file-loader。
在使用上，url-loader可以将小资源以Base64的方式编码到文件中，减少文件数，使用方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// webpack.config.js
module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.(png|jpg|ttf)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 10240 // = 10KB
                    }
                }]
            }
        ]
    },
    // ...
}