webpack 资源解析
资源解析
解析 ES6
使用 babel-loader
在项目根目录下安装 babel
npm install -D babel-loader @babel/core @babel/preset-env webpack
# 我用 npm 没装上 尝试了很多次
# 最后直接用 yarn add 装的
babel的配置文件是: .babelrc
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
test: /\.js$/,
use: 'babel-loader'
]
}
};
因为使用了 ES6,因此要在 .babelrc 里面新增
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/proposal-class-properties"
]
}
解析 React JSX
首先安装下依赖
npm install react react-dom @babel/preset-react -D
然后把 preset-react 加入到 .babelrc文件里面
{
"presets": [
"@babel/preset-env",
"@babel/preset-react" // 新增了 react 的 jsx 解析
],
"plugins": [
"@babel/proposal-class-properties"
]
}
解析 CSS
css-loader 用于加载 .css 文件, 并且转换成 commonjs 对象。
npm install style-loader css-loader -D
style-loader 将样式通过 <style>标签插入到 head 中。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
解析 Less 和 Sass
npm i less less-loader -D
less-loader 用于将 less 转换成 css
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
};
解析图片资源
npm i file-loader -D
file-loader 用于处理图片资源
module: {
rules: [
{
test: /\.(png|jpg|gif|jpeg)$/,
use: "file-loader",
},
],
},
解析字体资源
file-loader也可以用于处理字体
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
}
}
解析资源(图片解析和字体解析,还可以使用 url-loader)
url-lodaer 也可以处理图片和字体
npm install url-loader -D
url-loader 相比 file-loader,多了一个 base64 的转换
可以设置较小资源自动 base64
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit:10240
}
}]
}
]
}
};