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文件：

<!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 Build无法找到CSS或JS包

1 个答案: