Webpack4:将图像文件夹从"SRC文件夹"移动/导入到"DIST文件夹"

Question

我正在尝试使用 Webpack 4 将我的图像文件夹从我的 src 文件夹导入(移动(到我的 dist 文件夹，但与 Gulp 不同，即使我现在甚至没有试图弄乱图像，这项任务在 Webpack 中看起来也很复杂，我只想让 Webpack 加载它们并将它们放在我的 dist/image 文件夹中。

我已经看到人们在他们的索引上逐个图像导入.js我拒绝相信这是唯一的解决方案，有没有办法将整个文件夹移动到 dist/生产文件夹，而不必在索引上逐个文件导入.js ？

这是我目前的 webpack 配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: path.resolve(__dirname, 'src/js/scripts.js'),
output: {
path: path.resolve(__dirname,'dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
//JS
{
//Tipo de Archivo quiero reconocer
test: /.js$/,
exclude: /node_modules/,
//Que Loader se encarga del tipo de extension de archivo
use: {
loader: 'babel-loader',
options: {
presets:['babel-preset-env']
}
},
},           
//IMAGES
{
test: /.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'images/',
name:'[name][hash].[ext]', 
}
}
},                       
//SASS
{
test: /.scss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}           
]
},
plugins: [
new MiniCssExtractPlugin({
filename:'css/style.min.[contenthash].css',
}),
new HtmlWebpackPlugin ({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'        
}),
new WebpackMd5Hash()   
]
}

我没有粘贴我的索引.js文件，因为我只是不知道在那里做什么，因为我不会逐个图像导入。期待您的想法。

Answer 1

以下语句应将文件夹images中的所有图像输出到dist。

require.context("../images/", true, /.(png|svg|jpg|gif)$/);