使用 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'  
  }
};

您还可以使用延迟加载之类的方法。然后模块（块）将仅在需要时动态加载。 lazy-loading

这是一个使用多个条目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/