Question

为什么我们需要使用webpack，它是否仅用于捆绑和继承插件以最小化和压缩。 webpack在Web应用程序开发中扮演的主要角色是什么？

Answer 1

正如您所提到的，Webpack是一个捆绑工具，您可以使用任何其他捆绑工具，例如browserify / rollup。

React应用通常会使用ES6 imports，而不是所有browsers supports，因此您需要在React应用中使用一些捆绑器来解决这些“导入”并创建bundle文件当前浏览器理解的。

Webpack在前端社区中变得越来越流行和强大，因此大多数像[{3}}这样的“入门套件”都会使用它。

Answer 2

webpack的用途包括

将JSX语法（Javascript中的HTML标记）透明化为JS
将ES6语法（箭头函数，spead运算符等）透明化为浏览器支持的Javascript版本。
将代码拆分为可导入的单独文件（模块）要好得多。 Webpack＆＃39;捆绑＆＃39;所有这些文件都放在一个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代码正在进行转换＆＃39; JS即时。但是，这在生产使用中效率不高。

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

2 个答案: