响应Webpack的初始构建和运行时

Question

我还没反应过来，我还在努力弄清楚事情是如何组合起来的。在webpack中，我理解我们必须首先运行webpack命令，它将生成index.js文件，在配置中输出它。对于我的问题：

• 这个文件在运行时扮演什么角色？
• 每次我启动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浏览器中创建一个单独的location.Our文件，因为location.Our浏览器只理解普通的html、css和javascript.But，您可能要使用jsx或es6。因此，我们需要将这些转换为浏览器理解的内容。

根据您的webpack.config，webpack将将所有jsx文件转换为.js文件(使用bable )，并将其捆绑到一个单独的文件中，作为index.js。

角色由index.js扮演

如果最终的index.html文件浏览器要使用，应用程序中的directory.webpack将自动将index.js文件加载到index.html file.This的主体中。

如果您在package.json中使用以下配置

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

}

然后webpack继续监视.jsx文件中的任何更改，并更新index.js。

正如您所说的，您正在运行的代码没有webpack.It，这意味着您正在使用简单的.js file.But来使用es6或.jsx，您需要webpack。

希望能帮上忙！有关更多信息，您可以阅读https://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app/