使用 Webpack 将使用 npx create-react-app 创建的 react 应用程序捆绑到 .js 文件 [英] Bundle react app created with npx create-react-app to .js file using Webpack

问题描述

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

I'm a noob using ReactJS, right now i'm making a Widget using React and i have create different components, i have created the app using npx create-react-app and everithing is working, but now i'm trying to bundle all the components, css and files in a single .js file to be able to install the Widget in a web page.

我的代码是这样的:

index.js

App.js

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

i just saw a couple of posts and blogs that indicates i need to create my own webpack.config.js file and put in something like this:

`

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 文档中时没有显示任何内容

it creates a .js file but when i put the file in a html document is not showing anything

推荐答案

我终于明白了！

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

By default npx create-react-app create a structure with a lot of configurations, folders and files to make easy start to coding an app with React, one of this configs is setting up webpack to create a "build" directory when we type "npm build" with all the components of our app and allow us to deploy it everywhere, but in my case, I just needed to distribute a .js file with the widget that I am creating, this .js file could be placed inside of a in any HTML page and the widget will work apart, independent of the page, to make this I followed these steps:

1. 首先，我需要更改package.json"；归档脚本"部分，向 webpack 指示不仅会使构建"目录，也是一个包含所有 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"
},

请注意，我已经替换了捆绑包"；脚本，表示将执行build:react"和构建:捆绑"

Notice that I have replaced the "bundle" script, indicating that will execute "build:react" and "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 它需要采用index.js"由 npx 自动创建的文件作为入口点，webpack 也会创建一个 WidgetCL.js 作为输出，有趣的部分是在模块"中部分，在几个小时或问题之后，我可以配置两个加载器"，一个用于 .css 文件，另一个用于我的小部件中的所有 .js 组件，使用 Babel 作为加载器.

I am telling webpack that it needs to take the "index.js" file created automatically by npx as entry point, also webpack will create a WidgetCL.js as output, the interesting part is in the "module" section, after a few hours or issues, I could configure two "Loaders", one for the .css files and the other one for all the .js components in my widget, using Babel as Loader.

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

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

在这之后，我只需打开一个终端并输入npm run build"，然后 webpack 就会创建build"文件.文件夹和dist"包含我的 .js 文件的文件夹.

After this, I just open a terminal and type "npm run build", then webpack creates the "build" folder and also a "dist" folder with my .js file inside.

这篇关于使用 Webpack 将使用 npx create-react-app 创建的 react 应用程序捆绑到 .js 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！