Webpack Build ne trouve pas d'ensembles CSS ou JS

Lorsque j'essayais d'exécuter mon script de build pour la première fois, j'ai remarqué que pendant que les fichiers étaient créés, si j'essayais d'ouvrir le fichier index.html dans le répertoire de construction, Vous ne trouverez aucun des fichiers groupés CSS ou JS, même s'ils se trouvent dans le répertoire de construction. Voici mon webpack.config:Webpack Build ne trouve pas d'ensembles CSS ou 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 
    ] 
};

Et mon fichier index.html dans le dossier de construction:

<!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>

L'erreur que je reçois dans les outils de dev du navigateur Échec du chargement de ressources pour chacun de mes 3 JS bundle fichiers et mon 1 fichier CSS. Si je supprime le "/" devant chacun des noms de fichier dans le fichier index.html, ces erreurs disparaissent mais j'obtiens une autre erreur qui ne peut pas trouver un fichier .png spécifique dans la construction, qui est également dans le dossier de construction.

J'utilise webpack 2.6.1

Si je peux fournir des informations plus s'il vous plaît laissez-moi savoir - un peu nouvelle à poser des questions ici.

Source

2017-07-25 Dan Buda

Changer votre config webpack à:

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

Source

2017-07-25 04:03:45

Merci! Correction de cette erreur, maintenant sur le prochain! –

Webpack Build ne trouve pas d'ensembles CSS ou JS

Répondre

Questions connexes