前言
在项目中难免会处理一些文件, 比如：样式、音频、字体、图片等。
那对应的 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']
}
]
}
3.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')
})
]
4.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'])
]
webpack常用的开发插件
1.clean-webpack-plugin
运行webpack build时先把打包进入的文件夹清空
注意，它是以对象的方式去接收的
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
plugins: [
new CleanWebpackPlugin(),
]
2.html-webpack-plugin
模板文件,动态的去创造模板文件
主要用途
可以动态的引入js,因为每次打包后的js hash值可能不一样，它可以根据具体的hash值，引入js
const HtmlWebpackPlugin = require("html-webpack-plugin")
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
title: 'czklove',
filename: 'index.html',
chunks: '[name].bundle[hash].js'
})
]
3.HotModuleReplacementPlugin 模块热替换插件
webpack 内置插件，可以简单配置就能用。功能，就是提供保存后，页面刷新修改内容
new webpack.HotModuleReplacementPlugin()
4.最最重要的插件，SplitChunksPlugin ,代码分割插件
optimization: {
splitChunks: {
chunks: 'initial', // 分割方式 async, all ，initial
minSize: 30000, //分割后的文件最小值
minChunks: 1, // 最小引用次数
maxAsyncRequests: 5, // 异步的最大分割数
maxInitialRequests: 3, // 初始模块的最大分割数
automaticNameDelimiter: '~', // 分割后的名字用什么符号链接
name: true,
cacheGroups: { //缓存组
venxx: {
test: /vue/,
name: 'vuevendors'
},
vendors: {
test: /jquery/,
name: 'jqueryvendors'
}
}
}
},
主要用途
1.做代码分割，默认是将所以的异步引入单独打包，如常见的Vue异步路由组件
2.将不常改变的模块代码单独打包，这样更有利于浏览器的缓存处理，如将vue vuex vue-router, ui库，这些都是不常改变
3.将业务代码单独打包，这是经常改变的
4.异步模块代码单独打包，做预加载处理，加快首页加载速度
如果项目过大，打包事件过长，可以考虑使用HappyPack 插件，开启多进程打包（不是多线程，js是单线程的）
plugins: [
new HappyPack({
id: 'babel', // 与loader 配置项对应
threads: 4, // 开启多少个进程
loaders: ['babel-loader'] //用什么loader处理
})
]