即使成功編譯后，Webpack也不會在本地主機中加載輸出文件

Question

以下是我的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(),

    ]
}
}

這也是我的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"
  }

這里的問題是代碼可以正確編譯並且完全不顯示任何錯誤，但是卻不顯示該行：輸出是從localhost：8080提供的，因此我不知道它是否正在實際運行，但是我猜在那里是輸出路徑等問題。有人可以在這里向我指出正確的方向。 提前致謝。

編輯：

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

</body>
</html>

Answer 1

問題是您的輸入和輸出相同。 entry應該是您的源代碼中條目的路徑，它是您的輸入。 output定義有關捆綁文件的保存位置的選項。 這是兩個不同的文件！ 您編寫源代碼，然后將其構建到捆綁軟件中。

建議您在源代碼中使用/src ，在產品代碼中使用/dist 。 您的目錄應類似於：

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

為此，您的webpack配置對象必須如下所示：

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

另外，您的index.html必須引用捆綁的文件，但不用擔心html-webpack-module正在處理該文件！ 只需不鏈接/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