Question

所以我使用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/*来获取文件夹中的所有文件。因此，当我在webpack中自动找到它的文件夹中创建一个新的js文件时，并在运行该命令时对其进行编译。

有人知道怎么做吗？

感谢您的帮助。

Answer 1

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

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

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

希望这会对你有所帮助。

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

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

2 个答案: