在了解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 // 表示字节
}
}
]
},
好了,资源的解析就说到这里了,其他的也就大同小异了。