Question

我是React的新手，我还在努力了解事情是如何组合在一起的。在webpack中，我知道我们必须最初运行webpack命令，它将生成index.js文件，我们在config中输出它。对于我的问题：

此文件在运行时中起什么作用？
每次我做一个npm启动，它会自动更新我的index.js文件吗？

这是我的webpack.config：

var config = {
   entry: './main.js',

   output: {
      path: __dirname,
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

无论有没有最初运行webpack命令，我的代码仍会运行，因为我对它的真实含义感到困惑，因为即使我的目录中没有index.js，我仍然可以运行我的代码

Answer 1

为什么我们使用webpack ：
当我们运行webpack命令时，它会在给定的位置创建一个index.js文件。我们的浏览器只能识别vanilla html，css和javascript.But with react你可能会使用jsx或es6。所以我们需要将这些转换为浏览器理解的内容根据您的webpack.config，webpack将把所有jsx文件转换为.js文件（使用bable loader）并将其作为index.js捆绑到单个文件中。

由index.js扮演的角色：
您将在app目录中有一个index.html文件.webpack会自动将index.js文件加载到index.html文件的正文中。如果最终index.js文件浏览器将要使用。
如果您在package.json

中使用以下配置

{
  "scripts": {
    "dev": "webpack -d --watch",
    "build" : "webpack -p"
  },

}

然后webpack继续观察.jsx文件中的任何更改并更新index.js

正如你所说，代码在没有webpack的情况下运行。这意味着你使用的是简单的.js文件。但是要使用es6或.jsx，你需要webpack。
希望能帮助到你！。有关详情，请阅读https://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app/

React Webpack初始构建和运行时

1 个答案: