Colleagues, there is such a simple Webpack assembly.

 '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; }

Further, when I need to capture the audio-file , well, or jpg | png jpg | png file, I import it in the main JS file.

 import frederic_chopin from '../binary/audio/frederic_chopin_-_adazhio.mp3';

And then a reasonable question arises. When a file is one or even five, it is tolerable. And let's say I have 500 files. Do not import me all in manual?

The question is how to import a lot of files?

Can I import all the contents of a particular folder at once?

  • Webpack: Dependency Management - Grundy
  • @Grundy, thank you, I’ve been reading the documentation for a week, I haven’t gotten there yet ... I haven’t seen this section - Air
  • @Air get the answer already? 😢 - Excess Suslik
  • @ Exaggerated, no ... While picking, delve in ... If you can answer answer - Air 1:08 pm
  • Such an obvious and clever solution for this problem is difficult to find. As an option, you can write (separate) all the imports in one file and then export from a separate js-file and work on them. - Excess Gophers

1 answer 1

The answer is essentially purely technical. I can not forgive in more detail, until I penetrate deeper.

Everything is simple

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

And in the end we get it

enter image description here

and then do with this array what we want