Image Webpack4:从“移动/导入图像文件夹”;SRC文件夹";至;DIST文件夹";
我正试图用Webpack 4将我的图像文件夹从src文件夹导入(移动)到dist文件夹,但与Gulp不同的是,这项任务在Webpack中看起来非常复杂,即使我现在根本不想处理这些图像,我只想Webpack加载它们并将它们放在我的dist/image文件夹中 我看到人们在index.js上逐个导入图像,我不相信这是唯一的解决方案,有没有一种方法可以将整个文件夹移动到dist/production文件夹,而不必在index.js上逐个导入文件 这是我目前的网页配置:Image Webpack4:从“移动/导入图像文件夹”;SRC文件夹";至;DIST文件夹";,image,webpack,import,webpack-4,webpack-file-loader,Image,Webpack,Import,Webpack 4,Webpack File Loader,我正试图用Webpack 4将我的图像文件夹从src文件夹导入(移动)到dist文件夹,但与Gulp不同的是,这项任务在Webpack中看起来非常复杂,即使我现在根本不想处理这些图像,我只想Webpack加载它们并将它们放在我的dist/image文件夹中 我看到人们在index.js上逐个导入图像,我不相信这是唯一的解决方案,有没有一种方法可以将整个文件夹移动到dist/production文件夹,而不必在index.js上逐个导入文件 这是我目前的网页配置: const path = req
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文件,因为我不知道该在那里做什么,因为我不会逐个导入图像。期待着您的想法。以下语句应将文件夹
images
中的所有图像输出到dist
require.context("../images/", true, /\.(png|svg|jpg|gif)$/);
非常感谢,它成功了。只有一件事,谁在做把文件移到这里的工作?“require.context”或“文件加载器”?或者两者都有?。加载器和“require.context”有一条路径,这一事实让我有些困惑。谢谢!这是网页包。
文件加载器的工作就是加载这种类型的文件。看一下源代码,看看文件加载器实际上做了什么。我也有同样的问题。但是在webpack.config.js文件中我应该把那一行代码放在哪里呢?我上次使用这一行代码是在webpack版本3中,当时我已经把它放在了一个条目文件中,但是你可以尝试在webpack.config.js
中,只需把它放在export
语句之前或之后。