使用的WebPack要Transpile ES6爲單獨的文件

Question

是否有可能配置的WebPack做等價的：

babel src --watch --out-dir lib 

所以這看起來像這樣的目錄結構：

- src 
    - alpha 
    - beta.js 
    - charlie 
     - delta.js 
    - echo.js 
    - foxtrot 
     - golf 
     - hotel.js 

將彙編所有將文件傳輸到ES5並在lib目錄下以相同的結構輸出它們：

- lib 
    - alpha 
    - beta.js 
    - charlie 
     - delta.js 
    - echo.js 
    - foxtrot 
     - golf 
     - hotel.js 

我對所有文件路徑進行了遍歷並將它們作爲單獨的條目傳入，但似乎webpack在定義輸出文件時「忘記了」文件的位置。 Output.path只提供[hash]令牌，而Output.file有更多選項，但只提供[name],[hash]和[chunk]，所以至少表明不支持這種編譯。

爲了給我的問題提供一些上下文，我創建了一個由React組件及其相關樣式組成的npm模塊。我使用CSS模塊，所以我需要一種將JavaScript和CSS編譯到模塊的lib目錄中的方法。

Answer 1

如果要輸出到多個目錄，可以使用該路徑作爲條目名稱。

entry: { 
    'foo/f.js': __dirname + '/src/foo/f.js', 
    'bar/b.js': __dirname + '/src/bar/b.js', 
}, 
output: { 
    path: path.resolve(__dirname, 'lib'), 
    filename: '[name]', 
}, 

因此，你可以用一個函數生成滿足上述對您的條目列表：

const glob = require('glob'); 

function getEntries(pattern) { 
    const entries = {}; 

    glob.sync(pattern).forEach((file) => { 
    entries[file.replace('src/', '')] = path.join(__dirname, file); 
    }); 

    return entries; 
} 

module.exports = { 
    entry: getEntries('src/**/*.js'), 
    output: { 
    path: path.resolve(__dirname, 'lib'), 
    filename: '[name]', 
    }, 
    // ... 
}