Question

我想为网站创建多个入口点，这很容易在Webpack中使用entry属性的对象完成，如here。

但随着网站的增长（并且不可避免地）必须添加每个入口点似乎很麻烦且容易出错。所以我想简单地指向一个目录并说“这里是所有入口点。”

所以我已经熟练了：

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不会为你做这个）。这就是我最终得到的结果，它会在目录中找到所有文件并创建一个名称与文件匹配的条目：

/**
 * @param  float  the number to round
 * @param  int  the number of decimal places to allow
 */
function roundNumber( rnum, rlength ){
  var newnumber = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
  return parseFloat(newnumber);
}

/**
 * @param  float  the number to convert
 * @param  string  either "cm" or "in"
 * @param  int  the number of decimal places to allow
 */
function convertInchCm( num, convertTo, decimalPlaces ){
  var converted = convertTo == 'cm'
    ? parseFloat( num ) * 2.54
    : parseFloat( num ) / 2.54;
  return roundNumber( converted, decimalPlaces );
}

$("#ConvertInchCm").click(function(){
  var num = convertInchCm( $('#value').val(), 'cm', 1 );
  $('p').text( num );
});

调整搜索路径以满足您的特定需求。如果你有一个特殊的脚本目录，它将成为相对路径搜索的新根目录，那么将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]" }, ...作为第二个参数传递给同步也可能很有用。

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;

将目录中的所有文件作为webpack中的入口点的最佳方法是什么？

3 个答案: