Question

{ "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; }：

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

然后

http://example.com/dist

在浏览器中打开sourceMap。两个图像都不会显示。但是如果你从css加载器中删除style-loader查询参数，它就可以解决了。

什么事？如何补救呢？

Answer 1

医生要说的是什么：

style-loader：

关于源映射支持和url引用的资产的注意事项：当样式加载器与？sourceMap选项一起使用时，CSS模块将生成为Blob，因此相对路径不起作用（它们相对于chrome：blob或铬：devtools）。为了使资产保持正确的路径设置，必须设置webpack配置的output.publicPath属性，以便生成绝对路径。

css-loader：

默认情况下不启用它们，因为它们会暴露运行时开销并增加包大小（JS SourceMap不会）。除此之外，相对路径是错误的，您需要使用包含服务器URL的绝对公共路径。

以下是some related issues。

因此，当您启用源映射时，css文件将添加为blob。相对路径停止工作。我的猜测是output.publicPath正在做的事情。这里没有冒犯，也许没有更好的方法。

处理它的一种方法是......禁用源映射:)第二种方法是在extract-text-webpack-plugin中指定绝对URL。绝对地，我指的是具有域名的那个。第三个选项是......使用webpack.config.js将css代码提取到单独的文件中。

这是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) ], };代码解决问题已注释掉的问题。选择最适合您的选项：

SELECT Address, Car_Type, Colour, Mileage FROM table;

启用源映射时，不会加载图像

1 个答案: