Webpack4:将图像文件夹从 "SRC folder" 移动/导入到 "DIST folder"
Webpack4 : Moving / Importing Image Folder from "SRC folder" to "DIST folder"
我正在尝试使用 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 文件,因为我不知道该怎么做,因为我不会逐张导入图像。期待您的想法。
以下语句应将文件夹 images
中的所有图像输出到 dist
。
require.context("../images/", true, /\.(png|svg|jpg|gif)$/);
我正在尝试使用 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 文件,因为我不知道该怎么做,因为我不会逐张导入图像。期待您的想法。
以下语句应将文件夹 images
中的所有图像输出到 dist
。
require.context("../images/", true, /\.(png|svg|jpg|gif)$/);