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'
}
]
}
};