Webpack 编译文件夹中的所有文件答案

【问题标题】：Webpack compile all files in a folderWebpack 编译文件夹中的所有文件
【发布时间】：2017-11-19 07:05:42
【问题描述】：

所以我使用 Laravel 5.4 并使用 webpack 在 1 个大 js 文件中编译多个 .js 文件。

const { mix } = require('laravel-mix');

// Compile all CSS file from the theme
mix.styles([
   'resources/assets/theme/css/bootstrap.min.css',
   'resources/assets/theme/css/main.css',
   'resources/assets/theme/css/plugins.css',
   'resources/assets/theme/css/themes.css',
   'resources/assets/theme/css/themes/emerald.css',
   'resources/assets/theme/css/font-awesome.min.css',
], 'public/css/theme.css');



// Compile all JS file from the theme
mix.scripts([
   'resources/assets/theme/js/bootstrap.min.js',
   'resources/assets/theme/js/app.js',
   'resources/assets/theme/js/modernizr.js',
   'resources/assets/theme/js/plugins.js',
], 'public/js/theme.js');

这是我的webpack.mix.js 来做它（css 相同）。但我想得到类似：resources/assets/theme/js/* 从文件夹中获取所有文件。所以当我在文件夹中新建一个js文件时，webpack会自动找到它，并在我运行命令时进行编译。

有人知道怎么做吗？

感谢您的帮助。

【问题讨论】：

你能分享你的整个webpack.config.js吗？
@m_callens 我已经改了！

标签： javascript webpack laravel-5.4

【解决方案1】：

mix.scripts() 方法实际上允许使用通配符，正如 this issue 中的创建者所确认的那样。所以你的电话应该是这样的：

mix.scripts(
   'resources/assets/theme/js/*.js',
   'public/js/theme.js');

我认为它对样式的工作方式相同，因为它们使用the same method 来组合文件。

希望对你有所帮助。

【讨论】：

我不知道谢谢！它也适用于样式。

【解决方案2】：

如果有人希望代码将目录中的所有 sass/less/js 文件编译到具有相同文件名的不同目录中，您可以使用以下代码：

// webpack.mix.js

let fs = require('fs');

let getFiles = function (dir) {
    // get all 'files' in this directory
    // filter directories
    return fs.readdirSync(dir).filter(file => {
        return fs.statSync(`${dir}/${file}`).isFile();
    });
};

getFiles('directory').forEach(function (filepath) {
    mix.js('directory/' + filepath, 'js');
});

【讨论】：

d= (◕‿↼ ) scss 文件的最佳解决方案（我的意思是，mix.sass(...) 方法不支持模式，不像 mix.scripts(...)）。