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 个答案: