Javascript 如何使用网页包传输和缩小单个文件？

我有一个React应用程序，在我的应用程序中，我依赖于React脚本，因此build命令的定义类似于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()
  ]
};

> 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'),
| );

我在package.json文件包装器中添加了以下内容：webpack。现在，当我运行npm运行脚本包装器时，它会执行webpack命令，但会抛出错误。输出如下所示：

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()
  ]
};

> 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，而不接触任何其他内容？

将条目对象添加到webpack.config.js

webpack默认情况下将条目对象指向./src/index.js

因此，如果不重写entry对象，webpack将把文件捆绑在./src/index.js中

更新

正确指向输出目录的步骤

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

将条目对象添加到webpack.config.js

webpack默认情况下将条目对象指向./src/index.js

因此，如果不重写entry对象，webpack将把文件捆绑在./src/index.js中

更新

正确指向输出目录的步骤

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

---

更轻的替代方法是在package.json中创建一个脚本并使用babel minify

package.json

{
  ...

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

  ...
}

---

更轻的替代方法是在package.json中创建一个脚本并使用babel minify

package.json

{
  ...

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

  ...
}

---

__dirname+'build'您需要在该路径中使用目录分隔符，否则它将类似于'/your/projectbuild'而不是'/your/project/build'\uu dirname+'build'您需要在该路径中使用目录分隔符，否则它将类似于'/your/projectbuild'而不是'/your/project/build'@terett我更新了关于输出的问题的答案，请回答检查我编辑的代码。我认为传送不正常。我在build目录中生成了一个新的wrapper.js，但它似乎非常通用。我的意思是，它不包括我的原始wrapper.js文件中的代码，其中包括addEventListener和其他一些函数，但生成的输出不包括它们。你能检查我上面编辑的代码吗？@terett你能保留我在答案中指定的输入值并测试你的代码吗？如果您在github中有您的项目，请与您的条目共享我尝试过的URL。我的意思是现在问题不在条目上，它识别出wrapper.js文件的大小为7KB，但最后它生成了一个900字节的缩小通用文件，其中不包括我的wrapper.js文件中的任何内容。好吧，我的原始文件中似乎有问题。现在已修复。@terett我用您关于输出的问题更新了答案。请检查我编辑的代码。我认为传送不正常。我在build目录中生成了一个新的wrapper.js，但它似乎非常通用。我的意思是，它不包括我的原始wrapper.js文件中的代码，其中包括addEventListener和其他一些函数，但生成的输出不包括它们。你能检查我上面编辑的代码吗？@terett你能保留我在答案中指定的输入值并测试你的代码吗？如果您在github中有您的项目，请与您的条目共享我尝试过的URL。我的意思是现在问题不在条目上，它识别出wrapper.js文件的大小为7KB，但最后它生成了一个900字节的缩小通用文件，其中不包括我的wrapper.js文件中的任何内容。好吧，我的原始文件中似乎有问题。现在修好了。