Webpack解析文件和资源
Posted aiguangyuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webpack解析文件和资源相关的知识，希望对你有一定的参考价值。
1. 解析 ES6
1. 安装依赖；
npm i @babel/core @babel/preset-env babel-loader -D2. 配置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 -D2. 配置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 -D2. 配置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 -D2. 配置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 -D2. 配置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 -D2. 配置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 -D2. 配置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'
]
;
以上是关于Webpack解析文件和资源的主要内容，如果未能解决你的问题，请参考以下文章