webpack: 配置图片的打包后的目录
注意：本进阶在 webpack 进阶【8】的基础上进行衍生。
一、为什么要配置图片的打包后的目录
-
如果我们不配置图片打包后的目录，我们当前打包后的图片是直接在 dist 下面，如果有很多个图片全在 dist 下面，这样会很不规范。我们希望所有打包后的图片在一个文件夹 【images】下面，并且文件名是我们原来的文件名。不是下面打包后的这种情况。
image.png
-
二、webpack.config.js 配置图片打包目录
// (3): 配置 图片 文件解析
{
// 【i】表示忽视图片格式大小写 例如 .PNG
test: /\.(jpg|png|gif)$/i,
use: [
{
loader: 'url-loader',
// 如果图片太大再转成base64, 会让图片的体积增大 30% ，得不偿失。
options: {
// 图片超过 10k ,就不转成 base 文件，当图片小于 10k ，就转成 base 文件。
limit: 10 * 1024,
// 配置图片打包后在dist中的文件名, name: '[name].[ext]' 我们希望打包后的图片文件名和没打包前的图片名是一样的。
name: '[name].[ext]',
// 配置静态资源的引用路径。publicPath是打包后的 css 引用打包后的 图片的路径。意思是说css引用的的图片需要先回到上级，然后在 images 下寻找图片
publicPath: "../images/",
// 配置打包后的图片 dist 下的 images 文件夹下面。
outputPath: "images/"
}
}
]
}
三、执行打包脚本并查看打包后的效果
- 执行打包脚本
cnpm run build
-
现在打包后，图片是全在 dist/images 文件夹下，并且图片名称是和我们没有打包的图片名称是一致的。
如下图：
image.png
-
四、js 文件也可以打包后在一个单独的 js 文件夹下面
- webpack.config.js配置如下：
// 2. 打包的文件放在哪
output:{
// 打包的文件输出的目录（输出的目录必须是一个绝对路径），这里也可以写成path:path.join(_dirname, 'dist')
path: path.join(__dirname, './dist'),
// 打包后的文件名叫 bundle.js,在 dist 下面的 js 文件夹下面。
filename: 'js/bundle.js'
},
-
执行打包脚本后，再打包，发现了 bundle.js 是在 dist/js 下面。如下图所示：
image.png
-
五、webpack.config.js完整代码如下：
const path = require('path'); // 引入path模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入自动生成 html 的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 引入分享 css 的插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin') // 引入打包时清除 dist 目录的插件,引入时需要用对象{}包裹起来
// 配置webpack的配置文件，需要将配置的对象导出，给webpack使用
module.exports = {
// 1. 打包入口，从哪个文件开始打包
entry: './src/main.js',
// 2. 打包的文件放在哪
output:{
// 打包的文件输出的目录（输出的目录必须是一个绝对路径），这里也可以写成path:path.join(_dirname, 'dist')
path: path.join(__dirname, './dist'),
// 打包后的文件名叫 bundle.js,在 dist 下面的 js 文件夹下面。
filename: 'js/bundle.js'
},
// 3. 打包的模式： production 生产模式（打包后的文件或压缩） development(开发模式，不压缩)
mode: 'development',
// 4. 配置module模块加载规则
// 默认，webpack只认识JSON,javascript，不认识其他文件，如果希望打包处理其他文件，需要配置对应的loader
module: {
rules: [
// (1): 配置 .css 文件解析
{
// 正则： 匹配所有以 .css 结尾的文件
test: /\.css$/,
// 实际处理顺序：从右往左
// css-loader: 让webpack能够识别解析 .css 文件
// style-loader: 通过动态的创建 style 标签的方式（在打包好的bundle.js中），让解析后的 css 内容，能够作用到页面中
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader'
]
},
// (2): 配置 .less 文件解析
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader',
'less-loader'
]
},
// (3): 配置 图片 文件解析
{
// 【i】表示忽视图片格式大小写 例如 .PNG
test: /\.(jpg|png|gif)$/i,
use: [
{
loader: 'url-loader',
// 如果图片太大再转成base64, 会让图片的体积增大 30% ，得不偿失。
options: {
// 图片超过 10k ,就不转成 base 文件，当图片小于 10k ，就转成 base 文件。
limit: 10 * 1024,
// 配置图片打包后在dist中的文件名, name: '[name].[ext]' 我们希望打包后的图片文件名和没打包前的图片名是一样的。
name: '[name].[ext]',
// 配置静态资源的引用路径。publicPath是打包后的 css 引用打包后的 图片的路径。意思是说css引用的的图片需要先回到上级，然后在 images 下寻找图片
publicPath: "../images/",
// 配置打包后的图片 dist 下的 images 文件夹下面。
outputPath: "images/"
}
}
]
}
]
},
// 5. 插件配置
plugins: [
// 我们要把哪个目录下的 html 进行自动生成。
new HtmlWebpackPlugin({template: './public/index.html'}),
// 打包并分离出来的css叫什么名字，并在dist中的路径及路径名
new MiniCssExtractPlugin({
filename: 'css/index.css'
}),
// 打包时，把 dist 目录下的文件内容先清除
new CleanWebpackPlugin()
],
}
网友评论