前言
在项目中难免会处理一些文件, 比如：样式、音频、字体、图片等。
那对应的 loader 如何配置呢个？
今天我们来聊一聊开发中比较常用的 loader 配置
常用 Loader 配置
1. url-loader
安装： npm install url-loader -D
查看包的历史信息： npm info url-loader
注意： url-loader 内部会用到 file-loader，所以必须下载，但不用配置
安装：npm install file-loader
在 webpack/vue.config.js 中 的 module 配置 rules：
module: [
rules: [
// 处理图片
{
test: /\.(png|jpe?g|gif|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 1024*5, // 把小于 5kb 的文件 转换成 Base64 格式
name: 'img/[name].[ext]' // 指定路径
}
}
},
// 处理字体
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10240, // 可根据实际情况自行设定
name: 'fonts/[name].[hash:8].[ext]'
}
}
},
// 处理音视频
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10240, // 可根据实际情况自行设定
name: 'static/media/[name].[hash:8].[ext]'
}
}
},
]
]
2. css-loader 与 style-loader
css-loader：把 css 搞到 js 中去
style-loader：再吧 js 中的 css 搞到 style 中
安装：npm install -D css-loader style-loader
module: [
rules: [
// 处理样式
{
test: /\.css$/,
// loader 处理方式 是 从下往上 从右往左
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
// loader 处理方式 是 从下往上 从右往左
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.sass$/,
// loader 处理方式 是 从下往上 从右往左
use: ['style-loader', 'css-loader', 'sass-loader']
},
// 处理 stylus
{
test: /\.(styl|stylus)$/,
// loader 处理方式 是 从下往上 从右往左
use: ['style-loader', 'css-loader', 'stylus-loader']
}
]
}
- html-webpack-plugin
功能：把打包好的文件自动引入到入口文件 index.html 文件中
安装：npm install html-webpack-plugin -D
在 webpack.config.js 中引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 配置
plugins:[
new HtmlWebpackPlugin({
// 默许指定 模板的路径 否则会篡改网页 title
template: resolve('public/index.html')
})
]
- clean-webpack-plugin
功能：在每次打包时，先删除上次生成的文件
安装：npm install clean-webpack-plugin -D
在 webpack.config.js 中引入
const CleanWebpakPlugin = require('clean-webpack-plugin');
// 配置
plugins:[
new HtmlWebpackPlugin({
// 默许指定 模板的路径 否则会篡改网页 title
template: resolve('public/index.html')
}),
// 必须指定路径，是数组，可指定多个路径
new CleanWebpakPlugin(['dist'])
]
