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

Question

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

我的代码是这样的：

index.js

App.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" 包含我们应用程序的所有组件，并允许我们将其部署到任何地方，但在我的情况下，我只需要使用我正在创建的小部件分发一个 .js 文件，这个 .js 文件可以放在一个在任何 HTML 页面中，小部件将独立于页面独立工作，为此我遵循了以下步骤：

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”

1. 如我们所见，“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 作为加载器。

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

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

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