使用 Webpack 将使用 npx create-react-app 创建的 react 应用程序捆绑到 .js 文件

Question

我是一个使用 ReactJS 的菜鸟，现在我正在使用 React 制作一个小部件，我已经创建了不同的组件，我已经使用创建了应用程序npx create-react-app并且一切都在工作，但现在我正在尝试捆绑所有组件、css 和单个 .js 文件中的文件，以便能够在网页中安装小部件。

我的代码是这样的：

索引.js

应用程序.js

我刚刚看到一些帖子和博客表明我需要创建自己的 webpack.config.js 文件并放入如下内容：

`

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const glob = require('glob');

module.exports = {
  entry: {
    "bundle.js": glob.sync("build/static/?(js|css)/main.*.?(js|css)").map(f => path.resolve(__dirname, f)),
  },
  output: {
    filename: "build/static/js/bundle.min.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

`

它创建了一个 .js 文件，但是当我将该文件放在 html 文档中时没有显示任何内容

Answer 1

最后我明白了！

默认情况下，npx create-react-app创建一个包含大量配置、文件夹和文件的结构，以便轻松开始使用 React 编写应用程序，其中一个配置是设置 webpack 以在我们键入“npm build”时创建一个“build”目录我们应用程序的组件并允许我们将其部署到任何地方，但在我的情况下，我只需要使用我正在创建的小部件分发一个 .js 文件，这个 .js 文件可以放置在任何 HTML 页面的 a 中，并且小部件将独立于页面工作，为此我遵循了以下步骤：

1. 首先，我需要在“package.json”文件中更改“scripts”部分，以表明 webpack 不仅会创建“build”目录，还会创建一个包含所有 CSS、图像、组件的 bundle.js。

"scripts": {
    "start": "react-scripts start",
    "build": "npm run build:react && npm run build:bundle",
    "build:react": "react-scripts build",
    "build:bundle": "webpack --config webpack.config.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

请注意，我替换了“bundle”脚本，表示将执行“build:react”和“build:bundle”

2. 如我们所见，"build:bundle" 将采用 "webpack.config.js" 的配置，在我们最初的配置中我们没有这个文件，因为 webpack 是由 "npx create-react-app" 自动配置的，所以，我们需要在我们的应用程序的根路径中创建这个文件并创建一个配置来告诉 webpack 需要捆绑所有东西，我的配置是这样的：

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  entry: {
    entry: './src/index.js',
  },
  output: {
    filename: "build/static/js/WidgetCL.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

我告诉 webpack 它需要将 npx 自动创建的“index.js”文件作为入口点，webpack 也会创建一个 WidgetCL.js 作为输出，有趣的部分是在“模块”部分，几个小时后或问题，我可以配置两个“加载器”，一个用于 .css 文件，另一个用于我的小部件中的所有 .js 组件，使用 Babel 作为加载器。

3. 要使用 Babel，我需要在我的项目的根路径中创建一个名为 .babelrc 的文件，并以这种方式配置它：

{
    "presets": [
        "@babel/react" , 
        "@babel/env"  
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

在此之后，我只需打开一个终端并输入“npm run build”，然后 webpack 创建“build”文件夹和“dist”文件夹，其中包含我的 .js 文件。