Webpack 构建找不到 CSS 或 JS 包

Question

第一次尝试运行我的构建脚本时，我注意到在创建文件时，如果我尝试打开构建目录中的 index.html 文件，它无法打开找到任何 CSS 或 JS 包文件，即使它们位于构建目录中。这是我的 webpack.config:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

const extractSass = new ExtractTextPlugin({
    filename: '[name].[contenthash].css',
    disable: process.env.NODE_ENV === 'development'
});

const VENDOR_LIBS = [
    'react',
    'react-dom',
    'react-router',
    'react-router-dom'
];

module.exports = {
    entry: {
        bundle: ['babel-polyfill', './src/index.js'],
        vendor: VENDOR_LIBS
    },
    output: {
        path: path.join(__dirname, 'build'),
        publicPath: '/',
        filename: '[name].[chunkhash].js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                include: [path.resolve(__dirname, 'src')],
                query: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015', 'stage-0', 'react']
                }
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract([
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ])
            },
            {
                test: /\.png$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: { limit: 40000 }
                    },
                    {
                        loader: 'image-webpack-loader',
                        query: { bypassOnDebug: true }
                    }
                ]
            }
        ]
    },
    devServer: {
        historyApiFallback: true
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest']
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [autoprefixer]
            }
        }),
        extractSass
    ]
};

还有我的 index.html build 文件夹中的文件：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-
  scale=1">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="/bundle.9e0f7c3719625da97504e3ec5c2054db.css" rel="stylesheet"></head>
<body>
  <div id="entry"></div>
  <script type="text/javascript" src="/manifest.a2844a6ed8a5cd15d1a5.js"></script>
  <script type="text/javascript" src="/vendor.14bbb1b3abf7a67a5307.js"></script>
  <script type="text/javascript" src="/bundle.1ef0a652c0808bca139d.js">
  </script></body>
</html>

我在浏览器开发工具中遇到的错误是无法为我的 3 个 JS 包文件和 1 个 CSS 文件加载资源。如果我删除 index.html 文件中每个文件名前面的“/”，这些错误就会消失，但随后我会收到另一个错误，它无法在构建中找到特定的 .png 文件，即也在构建文件夹中。

我正在使用 webpack 2.6.1

如果我能提供任何进一步的信息，请告诉我 - 在这里提问有点陌生。

Answer 1

将您的 webpack 配置更改为：

module.exports = {
  output: {
    publicPath: ''
  }
}

Webpack 构建找不到 CSS 或 JS 包

Webpack Build Can't Find CSS or JS Bundles

bundle

build

webpack