我正在尝试使用Webpack 4将我的图像文件夹从src文件夹移动到dist文件夹,但与Gulp不同,即使我目前并没有尝试处理这些图像,这个任务在Webpack中看起来非常复杂。我只想让Webpack加载它们并将它们放在我的dist/image文件夹中。
我已经看到有人在他们的index.js中逐个导入图像,但我不相信这是唯一的解决方案,是否有一种方法可以将整个文件夹移动到dist/production文件夹而无需在index.js中逐个导入文件?
这是我目前的webpack配置:
我已经看到有人在他们的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文件,因为我不知道该怎么做,因为我不会逐个导入图片。期待您的想法。
webpack.config.js
中完成,只需将其放在export
语句之前或之后即可。 - Legendsentry:scripts.js
。 - Legends