javascript - 如何使用 webpack 转换和缩小单个文件？

Question

我有一个 React 应用程序，在我的应用程序中我依赖于 react-scripts，因此构建命令定义如下 "build": "react-scripts build"，一切正常。现在，重点是在我的 src 目录中，我有一个名为 wrapper.js 的 JS 文件，它是一个独立的文件，它是纯 JS，没有 React 的东西，但它使用 ES6 和一些更新的功能。所以，我想做的是，我想创建一个新命令，它将转换和缩小这个文件，并创建它的独立副本。我想使用 webpack 并在项目的根目录中创建了一个 webpack.config.js 文件，如下所示:

const path = require('path');
const MinifyPlugin = require('babel-minify-webpack-plugin');

module.exports = {
  mode: 'production',
  output: {
    path: __dirname + 'build',
    publicPath: '/build/',
    filename: 'wrapper.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src', 'wrapper.js')
        ],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  plugins: [
    new MinifyPlugin()
  ]
};

然后我将以下内容添加到我的 package.json 文件 "wrapper": "webpack"。现在，当我运行 npm run-scripts wrapper 时，它会执行 webpack 命令，但会抛出错误。输出如下所示:

> webpack

Hash: 0aa67383ec371b8b7cd1
Version: webpack 4.19.1
Time: 362ms
Built at: 04/06/2019 10:54:46 AM
 1 asset
Entrypoint main = wrapper.js
[0] ./src/index.js 223 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.js 22:4
Module parse failed: Unexpected token (22:4)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
>     <Root />,
|     document.getElementById('root'),
| );

我看到的问题是 webpack 还尝试转换和缩小我的 src 目录中的其他文件，因为它似乎已经命中了我的 React 应用程序的 index.js 文件。我怎样才能排除一切？或者更准确地说，我怎样才能告诉 webpack 只转译和压缩文件 /src/wrapper.js，而根本不碰任何其他东西？

Answer 1

更轻量级的替代方案可能是在您的 package.json 中创建一个脚本并使用 babel-minify，https://babeljs.io/docs/en/babel-minify

包.json

{
  ...

  "scripts": : {
    "minify": "minify wrapper.js --out-file wrapper.min.js --mangle.keepClassName"
  }

  ...
}