Коллеги, есть такая простая Webpack
сборка.
'use strict';
const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const minimizerBlock = {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
parse: {},
compress: {},
mangle: true,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_fnames: false,
},
}),
new OptimizeCSSAssetsPlugin({})
]
}
const config = {
entry: { main: './public/src/index.js' },
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js',
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 8888,
overlay: true,
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } },
{ test: /\.less$/, use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"] },
{ test: /\.scss$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] },
{ test: /\.sass$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] },
{
test: /\.(png|jpg|jpeg|svg|gif|webp)$/,
include: [
path.resolve(__dirname, './public/binary/image/')
],
use: [{
loader: 'file-loader',
options: {
name: 'image/[name].[ext]',
}
}]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
include: [
path.resolve(__dirname, './public/binary/fonts/')
],
use: [{
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
}
}]
},
{
test: /\.(mp3)$/,
include: [
path.resolve(__dirname, './public/binary/audio/')
],
use: [{
loader: 'file-loader',
options: {
name: 'audio/[name].[ext]',
}
}]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: './index.css',
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/src/', 'template.html'),
filename: 'index.html',
favicon: 'public/binary/image/icons/iconfinder_tech_0001_4023871.png'
})
]
};
module.exports = (env, options) => {
let production = options.mode == 'production';
config.devtool = production ? false : 'inline-cheap-module-source-map';
config.optimization = production ? minimizerBlock : {};
return config;
}
Далее, когда мне надо захватить audio-file
, ну или jpg | png
файл, я в главном JS
файле я его импортирую.
import frederic_chopin from '../binary/audio/frederic_chopin_-_adazhio.mp3';
И тут возникает резонный вопрос. Когда файл один ну или даже пять, это терпимо. А допустим у меня 500 файлов. Не импортировать же мне их все в ручную?!
Вопрос, как импортировать много файлов?
Можно ли импортировать сразу все содержимое какой-то определенной папки?
Ответ по сути чисто технический. Простите не могу подробнее, пока не вник глубже.
Все просто
let audioFiles = [];
function importAll(r) {
r.keys().forEach((s, i, arr) => audioFiles[i] = r(s));
}
importAll(require.context('../binary/audio/', true, /\.mp3$/));
console.log(audioFiles);
И в итоге получаем это
и далее делаем с этим массивом что хотим
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть простой слайдер, при нажатии на кнопку next включается следующая картинкаМожно ли как-то сделать задержку между кликами чтоб новая картинка...
Чтобы сохранялся добавленный класс к zoom и у списка active