[英]Webpack - How to bundle/require all files of a folder (subfolder)
I am trying to see if there is a shorter way of running webpack bundles, and also why my loaders do not work. 我试图看看是否有更短的方式来运行webpack捆绑包,以及为什么我的加载器不起作用。
Here is my code: 这是我的代码:
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']
// }
// }]
// };
The module.exports works but when I run the loaders I get errors. module.exports有效,但是当我运行加载器时,我会收到错误。
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. 我正在处理的项目有很多JS文件,我想知道是否有多个条目的快捷方式。 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? 我可以抓取同一文件夹中的所有JS文件,还是有一个JS文件来要求它们全部,而不是输入多个条目的文件名?
Let me know if this makes sense or not. 如果这有意义,请告诉我。 I am relatively new to programming. 我对编程比较陌生。 Thanks! 谢谢!
Regarding the second part of your question: 关于你问题的第二部分:
can I grab all JS files in the same folder or have a JS file to require them all 我可以抓取同一文件夹中的所有JS文件,或者有一个JS文件来要求它们
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: allJsFilesOfFolder.js:
require.context("../scripts/", true, /\.js$/);
This will bundle all scripts inside scripts
and all its subfolders
. 这将捆绑scripts
及其所有subfolders
所有脚本。
You need to install @types/webpack-env
to have context
at your hand. 您需要安装@types/webpack-env
才能拥有context
。
Specify false
if you want to bundle only the scripts in the scripts
folder. 如果要仅捆绑scripts
文件夹中的脚本,请指定false
。
You can do the same with other resources like images, you only have to adapt the regex
您可以使用其他资源(如图像)执行相同操作,只需调整regex
Copy @Legends comment as answer here. 复制@Legends评论作为答案。
have no experience with vue files, but as I said you can bundle not only js files, but also image files, for example the regex for image files would be: /.(png|ico|svg|jpg|gif)$/. 没有vue文件的经验,但正如我所说,你不仅可以捆绑js文件,还可以捆绑图像文件,例如图像文件的正则表达式将是:/。(png | ic | svg | .jpg | gif)$ /。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.