我正在尝试使用Webpack 4将图像文件夹从src文件夹导入(移动)到dist文件夹,但是与Gulp不同,即使我什至不打算乱搞这个问题,该任务在Webpack中看起来也是如此复杂目前,我只希望Webpack加载它们并将它们放在我的dist / image文件夹中。
我已经看到人们在他们的index.js上逐个图像导入图像,我拒绝相信这是唯一的解决方案,有没有一种方法可以将整个文件夹移动到dist / production文件夹而不必通过文件放在index.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()
]
}
我没有粘贴index.js文件,因为我不知道该怎么做,因为我不会逐个图像导入。期待您的想法。
答案 0 :(得分:1)
以下语句应将文件夹images
中的所有图像输出到dist
。
require.context("../images/", true, /\.(png|svg|jpg|gif)$/);