Webpack構建找不到CSS或JS包

第一次嘗試運行我的構建腳本時，我注意到在創建文件時，如果嘗試在構建目錄中打開index.html文件，它可以找不到任何CSS或JS包文件，即使它們在構建目錄中。這裏是我的webpack.config：Webpack構建找不到CSS或JS包

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 
    ] 
};

而且在build文件夾我的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

如果我能提供任何進一步的信息，請讓我知道 - 在問問題在這裏還挺新。

來源

2017-07-25 Dan Buda

您的WebPack配置更改爲：

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

來源

2017-07-25 04:03:45

謝謝！修復了錯誤，現在轉到下一個！ –

Webpack構建找不到CSS或JS包

回答

相關問題