javascript - webpack编译一个文件夹下的所有文件

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

有人知道怎么做吗？

感谢您的帮助。

Answer 1

如果有人想要代码将目录中的所有 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');
});