Webpack 4 - Как импортировать файлы, если их много?

109
31 августа 2019, 13:00

Коллеги, есть такая простая 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 файлов. Не импортировать же мне их все в ручную?!

Вопрос, как импортировать много файлов?

Можно ли импортировать сразу все содержимое какой-то определенной папки?

Answer 1

Ответ по сути чисто технический. Простите не могу подробнее, пока не вник глубже.

Все просто

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);

И в итоге получаем это

и далее делаем с этим массивом что хотим

READ ALSO
Задержка между кликами JavaScript

Задержка между кликами JavaScript

Есть простой слайдер, при нажатии на кнопку next включается следующая картинкаМожно ли как-то сделать задержку между кликами чтоб новая картинка...

137
Как подключить LocalStorage к скрипту?

Как подключить LocalStorage к скрипту?

Чтобы сохранялся добавленный класс к zoom и у списка active

149