將目錄中的所有文件作為 webpack 入口點的最佳方法？

Question

我想為一個網站創建多個入口點，這在 Webpack 中使用entry屬性的對象很容易完成，就像這里。

但是隨着站點的增長（並且不可避免地會），必須添加每個入口點似乎很麻煩並且容易出錯。 所以我想簡單地指向一個目錄並說“這里是所有的入口點”。

所以我做了這個：

var path = require('path');
var fs = require('fs');
var entryDir = path.resolve(__dirname, '../source/js');
var entries = fs.readdirSync(entryDir);
var entryMap = {};
entries.forEach(function(entry){
    var stat = fs.statSync(entryDir + '/' + entry);
    if (stat && !stat.isDirectory()) {
        var name = entry.substr(0, entry.length -1);
        entryMap[name] = entryDir + '/' + entry;
    }
});

module.exports = {
  entry: entryMap,
  output: {
    path: path.resolve(__dirname, '../static/js'),
    filename: "[name]"
  },
...

這工作正常，但是 Webpack 中是否有可以為我處理此問題的功能或配置選項？

Answer 1

我認為 glob 是去這里的正確方法（AFAIK webpack 不會為你做這件事）。 這就是我最終得到的結果，它將在目錄中查找所有文件並創建一個名稱與文件匹配的條目：

var glob = require('glob');
var path = require('path');

module.exports = {
  entry: glob.sync('../source/js/**.js').reduce(function(obj, el){
     obj[path.parse(el).name] = el;
     return obj
  },{}),
  output: {
    path: path.resolve(__dirname, '../static/js'),
    filename: "[name]"
  },
...

調整搜索路徑以滿足您的特定需求。 如果您有一個特殊的腳本目錄，將{cwd: someRoot}作為第二個參數傳遞給同步也可能很有用，這將使該目錄成為相對路徑搜索的新根。

Answer 2

我為此使用了Glob 。

 var path = require('path'); var glob = require('glob'); module.exports = { entry: { 'app' : glob.sync('./scripts/**/*.ts*') }, output: { path: path.join(__dirname, '/wwwroot/dist'), filename: '[name].bundle.js', sourceMapFilename: '[name].map' }, module: { rules: [ { test: /\\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, } ] }, resolve: { extensions: [".ts", ".js"] } };

Answer 3

在我看來，只需要一點 Node 技能就可以了，不需要那么復雜。

const webpack = require('webpack');
const path = require('path');
const fs = require('fs');

const fileNames = fs.readdirSync('./src').reduce((acc, v) => ({ ...acc, [v]: `./src/${v}` }), {});

const config = {
  entry: fileNames,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]',
  },
};

module.exports = config;