Webpack构建与React脚本构建

Question

Webpack构建与React脚本构建

mag*_*pie 3 reactjs webpack react-scripts

说webpack的配置如下

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

Run Code Online (Sandbox Code Playgroud)

现在的构建webpack是

和react-scripts构建的构建（静态包含css，js和媒体在单独的文件夹中）

问题：与react-scripts构建相比，webpack有什么特别的优势吗？（包括但不限于性能）

注意：package.json被编辑以实现此目的。

Answer 1

haz*_*ous 11

Webpack是一个通用打包程序，其应用程序超出了React。之前create-react-app，Web上充满了建立一个全新的React项目（使用webpack作为捆绑器）的示例。它非常灵活，可以处理React应用程序所需的其他内容。它适用于Angular，Vue，NodeJS甚至Web Assembly。

但是过去通常要花一些时间进行设置。您将需要了解其工作原理并对其进行配置，以便可以将React + ES6代码转换为普通计划的JS。您需要确定所需的输出结构并为其配置webpack。然后自己添加热模块重装和代码拆分支持。在此期间，您还需要添加Webpack所需的其他插件以支持上述所有:)。

这自然使刚开始使用React的人们感到有些疲劳。

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

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

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

作为初学者，在专注于您的react应用程序时，您可能想要坚持不懈。最终，有时Webpack配置cra不支持您想要做的事情。一个非常常见的示例是，如果您想编写一个组件库以在其他应用程序中重用。cra无法做到这一点（这与整个应用程序有关：）。然后，您可以切换到webpack并开始学习它。

仅针对Webpack的情况的另一个示例是，当您要构建特定于浏览器的JS捆绑软件时，对于无需转译和polyfills的较新浏览器而言，较小的捆绑包，对于包含所有这些的较旧浏览器，则是较胖的捆绑包。您将需要从cra弹出并自己执行。一般来说，坚持使用cra直到不能。优点是，纯webpack构建需要手动更改，因为要添加要使用的新功能，而cra内部升级其脚本以透明地使用新的相关功能。 (3认同)