PROSAGA码农传奇-gulp-为通配入口条目文件创建动态命名的输出

<div class =“post-text”itemprop =“text”>
  
    该
    <a href="https://webpack.js.org/configuration/output/" rel="nofollow noreferrer">
      webpack文档
    </A>
     声明：
  
  <BLOCKQUOTE>
    
      请注意，此选项称为文件名，但您仍然可以使用“js / [name] /bundle.js”之类的内容来创建文件夹结构。
    
  </BLOCKQUOTE>
  
    所以如果你的webpack的输出文件名是
     <code>
 dirA/fileA
 </code>
    ，它将输出到
  
   <pre>
 <code>
 |-- dist
 |-- dirA
 |-- fileA.js

</code>
 </pre>
  
    但你也说明了这一点
  
  <BLOCKQUOTE>
    
      保留通配符** / * .js很重要
    
  </BLOCKQUOTE>
  
    我们可以利用您可以通过将对象传递给webpack的条目来命名文件的事实。
  
  
    我假设你正在使用节点
     <code>
 glob
 </code>
     （该
     <code>
 $.glob.sync
 </code>
     我有点困惑），其输出是一个匹配glob模式的路径数组。然后，我们只需要将此数组修改为具有以下格式的对象：
  
   <pre>
 <code>
 //from 
["./src/dirA/fileA.js", "./src/dirB/fileB.js"]
// to
{ 
 "dirA/fileA": "./src/dirA/fileA.js",
 "dirB/fileB": "./src/dirB/fileB.js",
}

</code>
 </pre>
  
    这是一个简单的例子：
  
   <pre>
 <code>
 const glob = require('glob');

const entry = glob.sync('./src/**/*.js').reduce((entry, path) => {
  const pathName = path.replace(/(\.\/src\/|\.js)/g, ''); // remove `./src/`, `.js`
  entry[pathName] = path;
  return entry;
}, {});

module.exports = {
  mode: 'development',
  entry,
  output: {
    filename: '[name].js'
  }
}

</code>
 </pre>
</DIV>