如何使用 webpack 转译和缩小单个文件？

Question

我有一个 React 应用程序，并且在我的应用程序中依赖于react-scripts，因此构建命令的定义如下"build": "react-scripts build"，并且一切正常。现在，重点是在我的src目录中，我有一个名为 的 JS 文件wrapper.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"
  }

  ...
}