Webpack-如何捆绑/获取文件夹(子文件夹)的所有文件 [英] Webpack - How to bundle/require all files of a folder (subfolder)

问题描述

我正在尝试查看运行Webpack捆绑软件的方法是否更短，以及为什么我的加载程序无法正常工作.

I am trying to see if there is a shorter way of running webpack bundles, and also why my loaders do not work.

这是我的代码:

module.exports = {
context: path.join(__dirname, 'dist'),
entry: ['./ES6bundle.js', './jQuery.js'],
output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
}
};
// module: {
//     loaders: [{
//         test: /\.js?$/,
//         exclude: /node_modules/,
//         loader: 'babel-loader',
//         query: {
//             presets: ['env']
//         }
//     }]
// };

module.exports可以工作，但是当我运行装载程序时，我得到了错误.

The module.exports works but when I run the loaders I get errors.

我的另一个问题是关于将多个条目合并到一个文件中.
我正在处理的项目有很多JS文件，我想知道是否存在用于多个条目的快捷方式.除了可以输入多个条目的文件名之外，我还可以抓取同一文件夹中的所有JS文件，或者让它们包含所有JS文件吗?

My other question is about consolidating multiple entries into one file.
The project I am working on has many JS files, and I was wondering if there was a shortcut for multiple entries. Instead of typing out multiple entries' filenames, can I grab all JS files in the same folder or have a JS file to require them all?

让我知道这是否有意义.我是编程新手.谢谢！

Let me know if this makes sense or not. I am relatively new to programming. Thanks!

推荐答案

关于问题的第二部分:

我可以抓取同一个文件夹中的所有JS文件还是拥有一个JS文件来要求他们全部

can I grab all JS files in the same folder or have a JS file to require them all

您可以拥有一个条目文件，然后在其中进行操作:

You can have one entry file and in there you do:

module.exports = {
    context: path.join(__dirname, 'dist'),
    entry: ['./jQuery.js', './allJsFilesOfFolder.js'],

allJsFilesOfFolder.js:

require.context("../scripts/", true, /\.js$/);

这会将所有脚本捆绑在 scripts 及其所有子文件夹中.

This will bundle all scripts inside scripts and all its subfolders.

您需要安装 @ types/webpack-env 来获得 context .

如果只想捆绑 scripts 文件夹中的脚本，请指定 false .

Specify false if you want to bundle only the scripts in the scripts folder.

您可以对图像等其他资源执行相同的操作，只需调整 regex

You can do the same with other resources like images, you only have to adapt the regex

这篇关于Webpack-如何捆绑/获取文件夹(子文件夹)的所有文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！