Как перенести и минимизировать один файл с помощью веб-пакета?

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, потому что кажется, что он попал в файл index.js моего приложения React. Как я могу исключить все? Или, точнее, как я могу сказать webpack о том, чтобы транслировать и минимизировать только файл /src/wrapper.js, и вообще ничего не трогать?

Answer 1

Более легким вариантом может быть создание скрипта в вашем package.json и использование babel-minify, https://babeljs.io/docs/en/babel-minify

package.json

{
  ...

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

  ...
}

Answer 2

Добавьте entry объект к вашему webpack.config.js.

module.exports={
    entry: './src/wrapper.js',
    ...
}

webpack указывает объект entry по умолчанию на ./src/index.js.

Так что, если вы не переопределите объект entry, webpack объединит файл в ./src/index.js

Обновление

Чтобы правильно указать каталог output

output: {
    filename: 'wrapper.js',
    path: path.resolve(__dirname, 'build')
}