Les images ne sont pas chargées lorsque les cartes de source sont activés

package.json:Les images ne sont pas chargées lorsque les cartes de source sont activés

{ 
    "dependencies": { 
    "css-loader": "^0.26.0", 
    "file-loader": "^0.9.0", 
    "html-webpack-plugin": "^2.24.1", 
    "node-sass": "^3.13.0", 
    "sass-loader": "^4.0.2", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.3" 
    } 
}

webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './1.js', 
    output: { 
     path: 'dist', 
     filename: 'bundle.js', 
    }, 
    module: { 
     loaders: [ 
      {test: /\.png$/, loader: 'file'}, 
      {test: /\.css$/, loaders: ['style', 'css?sourceMap']}, 
      {test: /\.sass$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}, 
     ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: 'template.ejs', 
     }), 
    ], 
};

template.ejs:

<!doctype html> 
<html> 
<body> 

<div></div> 

</body> 
</html>

1.js:

require('./1.css'); 
require('./1.sass');

1.sass:

div 
    width: 100px 
    height: 100px 
    margin: auto 
    background: url(1.png) no-repeat

1.css:

body { 
    margin: 0; 
    background: url(1.png) no-repeat; 
}

Puis

$ npm i 
$ rm -rf dist/* && ./node_modules/.bin/webpack

Et http://example.com/dist ouvert dans le navigateur. Les deux images ne sont pas affichées. Mais si vous retirez sourceMap param de requête de chargeurs CSS, ça va marcher.

Quel est le problème? Comment y remédier?

Source

2016-11-22 x-yuri

Vous devez laisser un commentaire ici noter que cela est conçu comme une réponse auto canonique poster, ainsi que dans quelle situation vous avez observé que votre avis a nécessité cette paire de questions et réponses . De cette façon, personne ne sera confus en lisant votre question quant à l'intention de ce que la réponse devrait contenir. –

@TravisJ En effet, j'ai répondu moi-même à mon message. Et peut-être que la question est canonique. En ce qui concerne la situation, je ne comprends pas vraiment ce qui n'est pas clair. Je voulais avoir des cartes sources, mais quand je les ai activées, les images ont disparu. Et il y a deux questions à la fin: 1) quelle est la cause, et 2) comment y remédier. S'il vous plaît élaborer. –

J'ai trouvé utile de laisser un commentaire explicatif sur la question, lorsque vous postez à la fois la question et la réponse en une paire, juste pour que si les gens passent devant votre message (tl; dr;) ils peuvent aussi avoir une référence à ce qui se passait. –

Ce que le doc a dit:

style-loader:

Remarque sur le soutien des cartes source et actifs de référence avec l'URL: quand chargeur de style est utilisé avec l'option Sourcemap, les modules CSS seront générés comme Blobs, les chemins relatifs ne fonctionnent pas (ils seraient relatifs à chrome: blob ou chrome: devtools). Pour que les actifs conservent des chemins corrects, la propriété output.publicPath de la configuration webpack doit être définie, afin que les chemins absolus soient générés.

css-loader:

Ils ne sont pas activés par défaut, car ils exposent une surcharge d'exécution et l'augmentation de la taille du paquet (JS Sourcemap ne le font pas). En plus de cela, les chemins relatifs sont bogués et vous devez utiliser un chemin public absolu qui inclut l'URL du serveur.

Et voici some related issues. Par conséquent, lorsque vous activez les cartes sources, les fichiers css sont ajoutés sous forme de blobs. Et les chemins relatifs cessent de fonctionner. Je suppose que c'est style-loader de faire. Aucune infraction ici, peut-être qu'il n'y a pas de meilleur moyen.

Et une façon de faire face est ... désactiver les cartes source :) Le second, pour spécifier l'URL absolue dans output.publicPath. Et par absolu je veux dire celui avec un nom de domaine. Et la troisième option est ... pour extraire le code CSS dans des fichiers séparés, avec extract-text-webpack-plugin.

Voici le webpack.config.js avec le code résolvant le problème mis en commentaire.Choisissez l'option qui vous convient le mieux:

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: './1.js', 
    output: { 
     path: 'dist', 
     filename: 'bundle.js', 
     // publicPath: 'http://example.com/dist/', // (2) 
    }, 
    module: { 
     loaders: [ 
      {test: /\.png$/, loader: 'file'}, 
      {test: /\.css$/, loaders: ['style', 'css?sourceMap']}, 
      // {test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap')}, // (3) 
      {test: /\.sass$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}, 
      // {test: /\.sass$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')}, // (3) 
     ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: 'template.ejs', 
     }), 
     // new ExtractTextPlugin('[name].css'), // (3) 
    ], 
};

Source

2016-11-22 22:28:12

Les images ne sont pas chargées lorsque les cartes de source sont activés

Répondre

Questions connexes