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包

回答

相关问题