Webpack 构建与 react-scripts 构建 [英] Webpack build vs react-scripts build

问题描述

说webpack config如下

Say the webpack config is as follows

{
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
},

现在 webpack 的构建是

以及来自 react-scripts 的构建(静态在单独的文件夹中包含 css、js 和媒体)

and the build from react-scripts build ( static contains css, js and media in seperate folders )

问题:与 react-scripts 构建相比，webpack 有什么特别的优势吗?(包括但不限于性能)

Question: Is there any specific advantage of webpack over react-scripts build? ( including but not limited to performance )

注意:package.json 已被编辑以实现此目的.

NOTE: package.json is edited to achieve this.

推荐答案

Webpack 是一个通用的打包器，应用程序超越 React.在 create-react-app 之前，网络上充满了建立一个全新的 React 项目的例子，该项目使用 webpack 作为打包器.它非常灵活，可以处理包括和超出 React 应用程序所需的事情.它适用于 Angular、Vue、NodeJS 甚至 Web Assembly.

Webpack is a general purpose bundler, with applications beyond React. Before create-react-app, the web was full of examples of setting up a brand new React project which uses webpack as the bundler. It is extremely flexible and can handle things including and beyond what a React application would need. It works for Angular, Vue, NodeJS and even Web Assembly.

但它过去需要一段时间来设置.您需要了解它的工作原理并对其进行配置，以便将 React+ES6 代码转换为 plan-vanilla JS.您需要决定您喜欢的输出结构并为其配置 webpack.然后还自己添加热模块重新加载和代码拆分支持.在此期间，您还需要添加 Webpack 所需的其他插件以支持上述所有内容:)

But it used to take a while to setup. You will need to understand its working and configure it so that you can transpile your React+ES6 code into plan-vanilla JS. You would need to decide the output structure you like and configure webpack for it. And then also add hot-module-reloading and code-splitting support yourself. During this, you will also need to add other plugins required by Webpack to support all the above :).

对于刚开始使用 React 的人来说，这自然会引起一些疲劳.

This naturally caused some fatigue with folks who were starting with React.

因此 facebook 创建了内部使用 webpack 的 cra，预配置包含所有不错的工具来处理这些基础知识并帮助您专注于代码的 React 部分.它尽可能地对你隐藏 webpack，否则如果用户更改配置，构建过程可能会中断.

So facebook created cra which internally uses webpack, pre-configured to include all the nice tools to take care of these basics and help you focus on the React part of your code. It hides webpack from you as much as possible, otherwise the build process may break if the configuration is changed by the user.

除此之外，cra 使用的结构约定不应该对基本的 webpack 设置产生任何性能影响.这只是一个约定.

With that aside, the structural conventions which cra uses should not be having any performance impact over a bare-bones webpack setup. It's just a convention.

那么您的问题应该是，我什么时候使用 create-react-app，什么时候使用 Webpack?

作为初学者，您可能希望在专注于 React 应用程序时坚持使用 cra.最终会有一段时间，您想要做的事情不受 cra 在幕后管理的 webpack 配置的支持.一个非常常见的例子是，如果您想编写一个组件库以在其他应用程序中重用.这不能由 cra 完成(这是关于整个应用程序:)).然后你可以切换到 webpack 并开始学习它.

As a beginner you might want to stick to cra as you focus on your react app. Eventually there would come a time where what you want to do is not supported by the webpack configuration cra is managing under the hood. A very common example is if you want to write a component library to reuse in other apps. This cannot be done by cra (it's about the whole app :)). You can then switch over to webpack and start learning it.

这篇关于Webpack 构建与 react-scripts 构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！