为什么我们需要在 ReactJs 中使用 web-pack？

Question

为什么要用webpack，难道只是为了捆绑和继承Plugins来最小化和压缩。 webpack 在 Web 应用程序开发中扮演的主要角色是什么？

Answer 1

正如您所说，Webpack 是一个打包工具，您可以使用任何其他打包工具，例如 browserify / rollup。

React 应用程序通常会使用 ES6 imports, and not all the browsers supports 它，因此您需要在 React 应用程序中使用一些捆绑器来解决这些问题 "imports" 并创建一个当前浏览器可以理解的 bundle 文件。

Webpack 在前端社区变得越来越流行和强大，因此像 create-react-app 这样的大多数 "starter kits" 都会使用它。

Answer 2

webpack的用途包括

将 JSX 语法（HTML 内的标签 Javascript）转译为 JS
将 ES6 语法（箭头函数、spead 运算符等）转换为浏览器支持的 Javascript 版本。
最好将代码拆分成可以导入的单独文件（模块）。 Webpack 'bundles' 将所有这些文件打包成一个 JS 文件以供生产使用
在打包的时候，还可以进行minify、uglify等优化

顺便说一句，您不需要 使用 webpack。例如，

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First React Example</title>
  </head>
  <body>
    <div id="greeting-div"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/cjs/react-dom-server.browser.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script type="text/babel">
      var Greeting = React.createClass({
        render: function() {
          return (
            <p>Hello, Universe</p>
          )
        }
      });

      ReactDOM.render(
        <Greeting/>,
        document.getElementById('greeting-div')
      );
    </script>
  </body>
</html>

这里，JSX 代码正在 'transpiled' 动态获取 JS。但是，这在生产使用中效率不高。

为什么我们需要在 ReactJs 中使用 web-pack？

Why we need to use web-pack in ReactJs?

reactjs

webpack

webpack-dev-server

webpack-2