Webpack解析文件和资源
2023-02-19 12:20:16 时间
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'
}
]
}
};
相关文章
- Jgit的使用笔记
- 利用Github Action实现Tornadofx/JavaFx打包
- 叹息!GitHub Trending 即将成为历史!
- 微软软了?开源社区讨论炸锅,GitHub CEO 亲自来答
- GitHub Trending 列表频现重复项,前后端都没去重?
- Photoshop Elements 2021版本软件安装教程(mac+windows全版本都有)
- (ps全版本)Photoshop 2020的安装与破解教程(mac+windows全版本都有)
- (ps全版本)Photoshop cc2018的安装与破解教程(mac+windows全版本,包括2023
- 环境搭建:Oracle GoldenGate 大数据迁移到 Redshift/Flat file/Flume/Kafka测试流程
- 每个开发人员都要掌握的:最小 Linux 基础课
- 来撸羊毛了!Windows 环境下 Hexo 博客搭建,并部署到 GitHub Pages
- 超实用!手把手入门 MongoDB:这些坑点请一定远离
- 【GitHub日报】22-10-09 zustand、neovim、webtorrent、express 等4款App今日上新
- 【GitHub日报】22-10-10 brew、minio、vite、seaweedfs、dbeaver 等8款App今日上新
- 【GitHub日报】22-10-11 cobra、grafana、vue、ToolJet、redwood 等13款App今日上新
- Photoshop 2018 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2017 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2020 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2023 资源免费下载(mac+windows全版本都有,包括最新的2023)
- 最新版本Photoshop CC2018软件安装教程(mac+windows全版本都有,包括2023