0

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

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

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

15
  • Webpack: Dependency Management
    – Grundy
    25 янв 2019 в 12:38
  • @Grundy, благодарю, уже неделю документацию читаю, видать туда еще не добрался... Не видел этого раздела
    – Air
    25 янв 2019 в 12:41
  • @Air получается уже ответ есть ? 😢
    – Randall
    25 янв 2019 в 13:03
  • @Избытоксусликов, нет... Пока ковыряюсь, вникаю... Если можешь ответить отвечай
    – Air
    25 янв 2019 в 13:08
  • 1
    Если задача - скопировать файлы в готовый бандл, то есть же copy-webpack-plugin (а вообще mp3-файлы в вебпаке это ОЧЕНЬ странно)
    – andreymal
    25 янв 2019 в 14:06

1 ответ 1

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

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

введите сюда описание изображения

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.