使用 WebPack 和 Babel 組合、縮小並轉換為 ES5

Question

我有一個完美的項目，它是用 TS 編寫的，我不得不將它轉換為普通的 JS 並且它在大多數情況下都有效。 我正在努力解決的問題是在文件合並和縮小后刪除默認的 WebPack 加載器，WebPack 在最終輸出中包含一個加載器，即使我認為我不需要加載器，因為所有文件都合並到一個大文件中。

+ filea.js
+ fileb.js
+ filec.js
+ filed.js
-> output bundle.js

我讀過一些文章/帖子，建議手動創建一個配置文件，提供將組合和縮小的每個文件的名稱，這可能工作正常，但問題是我正在處理的項目被分成小塊（模塊），以便像 WebPack 這樣的工具可以足夠智能，並且知道何時應該將文件作為依賴項添加到最終輸出中。

我知道我們可以合並和縮小多個單獨的 JS 文件，但是在導出單個文件時，使用 TS 似乎任務很簡單，但在普通 JS 世界中，關於該主題的信息很少或沒有。

Answer 1

我有點不明白，你想要一個大文件還是小的單個模塊（塊）？

小模塊的一個例子：

module.exports = {  
  entry: {    
    app: './src/app.js',
    admin: './src/admin.js',
    contact: './src/contact.js'  
  }
};

另一種方法是一個主模塊，它包含所有較小的模塊。

module.exports = {  
  entry: {    
    app: './src/app.js'  
  }
};

您還可以使用延遲加載之類的東西。 然后模塊（塊）將僅在需要時動態加載。 延遲加載

這是使用多個條目webpack-boilerplate的示例。

Answer 2

聽起來您有一個包含多個 JS 文件的項目，並且您想使用 webpack 捆綁所有這些文件並縮小結果。

Webpack 就是為此而構建的。

您需要在 package.json 中添加一個構建步驟，如下所示：

"scripts": {
  "build": "webpack --config prod.config.js"
}

然后，您需要使用 module.exports 塊創建一個 webpack.config.js，該塊具有要包含在您的項目中的入口點和規則。 以下應該是可以讓您入門的最小設置：

const path = require('path');

module.exports = {
  entry: "./your/path/to/src",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {},
  plugins: [
    new MinifyPlugin(minifyOpts, pluginOpts)
  ]
}

You can add modules that perform additional code transpilation for files that matcha a certain regex. You can also use a plugin to perform minification such as babel-minify-webpack-plugin as documented here https://webpack.js.org/plugins/babel-minify-webpack-plugin/. (Note you will need to add this dependency.)

The full webpack configuration can be found here: https://webpack.js.org/configuration/