即使成功编译后，Webpack也不会在本地主机中加载输出文件

Question

Below is my piece of code for webpack: 以下是我的webpack代码：

module.exports = env => {
return {
    entry: './src/index.js',
    devtool: "inline-source-map",
    output: {
        path: path.join(__dirname, 'src'),
        filename: 'index.html',
        publicPath: path.join(__dirname, 'src'),
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    },
    node: {
        fs: "empty"
    },
    devServer: {
        compress: true,
        inline: true,
        contentBase: './',
        port: '8080',
        disableHostCheck: true
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                },

            },
            {
                test: /\.s?css$/,
                loaders: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            }
        ]
    },
    resolve: {
        extensions: ['.js','.jsx']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.HashedModuleIdsPlugin(),

    ]
}
}

Also here is my package.json : 这也是我的package.json：

"dependencies": {
"@reactioncommerce/components": "^0.65.1",
"@reactioncommerce/components-context": "^1.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-scripts": "2.1.8",
"reacto-form": "0.0.2",
"styled-components": "^3.4.10"


 },
  "scripts": {
    "start": "webpack --mode development --open --hot",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/preset-env": "^7.4.2",
    "react-router-dom": "^5.0.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  }

THe problem here is that the code compiles correctly and shows no error at all , but doesn't show the line : output is served from localhost:8080 And hence I don't know wether it is actually running or not.But I guess there is some issue with output path or something.Can somebody please point me in the right direction here. 这里的问题是代码可以正确编译并且完全不显示任何错误，但是却不显示该行：输出是从localhost：8080提供的，因此我不知道它是否正在实际运行，但是我猜在那里是输出路径等问题。有人可以在这里向我指出正确的方向。 Thanks in advance. 提前致谢。

Edit : 编辑：

<html>
<head>
    <meta charset="utf-8">
    <title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app" />

</body>
</html>

Answer 1

The issue is that your input and output are the same. 问题是您的输入和输出相同。 entry should be the path to your(s) entry in your source code, it's your input. entry应该是您的源代码中条目的路径，它是您的输入。 output defines options as to where your bundled file will be saved. output定义有关捆绑文件的保存位置的选项。 These are two different files! 这是两个不同的文件！ You write your source code, then you build it into your bundle. 您编写源代码，然后将其构建到捆绑软件中。

What is recommended is to have /src for your source code and /dist for your product code. 建议您在源代码中使用/src ，在产品代码中使用/dist 。 Your directory should look like: 您的目录应类似于：

/src
  /index.js
  /index.html
  ... rest of your source code
/dist
  /bundle.js <-- will be generated by webpack

To have this, your webpack config object must look like: 为此，您的webpack配置对象必须如下所示：

{
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // ...
  },
  // ...
}

Also, your index.html must reference the bundled file, but don't worry - that is being taken care of by html-webpack-module ! 另外，您的index.html必须引用捆绑的文件，但不用担心html-webpack-module正在处理该文件！ Simply don't link any script in /src/index.html ! 只需不链接/src/index.html任何脚本！

即使成功编译后，Webpack也不会在本地主机中加载输出文件

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-03-26 14:27:08

即使成功编译后，Webpack也不会在本地主机中加载输出文件

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-03-26 14:27:08

解决方案1
1 已采纳 2019-03-26 14:27:08