sourcemaps lists the wrong file and line
Example:
if i have class .example
in my SCSS file in line 8, sourcemaps will list it in line 3246
clicking on the source in the dev tools redirects you to line 8 in the SCSS file where u can see the class isn't listed there
checking the CSS file u see .example
in line 3246.
Things i tried:
- Changing
devtool
to eithersource-map
orinline-source-map
- Adding
sourceMap
query toresolve-url-loader
- Removing
ExtractTextPlugin
Webpack Config:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');
module.exports = {
devtool: 'eval',
debug: true,
entry: {
app: path.resolve(__dirname, './site/js/app.js'),
vendor: path.resolve(__dirname, './site/js/vendor.js')
},
output: {
path: path.resolve(__dirname, './site/dist'),
publicPath: '/dist/',
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js'
},
module: {
loaders: [
{ //Handle HTML Templates
test: /\.html$/,
exclude: /partials/,
loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './site')) + '/!html'
}, { //Handle HTML Partials
test: /\.html$/,
include: /partials/,
loader: 'ng-cache?prefix=partials'
}, { //Handle Images
test: /\.(gif|png|jpe?g|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=images/[name].[hash].[ext]',
'image-webpack'
]
} , { //Handle Fonts
test: /\.(eot|otf|ttf|woff|woff2)$/i,
loader: 'file?hash=sha512&digest=hex&name=fonts/[name].[hash].[ext]'
} , { //Handle SCSS
test: /\.scss/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap")
}
]
},
htmlLoader: {
ignoreCustomFragments: [/\{\{.*?}}/],
root: path.resolve(__dirname, './site/'),
attrs: ['img:src', 'img:ng-src']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor'],
minChunks: Infinity
}),
new ExtractTextPlugin("[name].css"),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './site/templates/index.ejs'),
filename: path.resolve(__dirname, './views/home.ejs'),
minify: {
removeComments: true
}
}),
new ScriptExtHtmlWebpackPlugin({
defer: [/app/, /vendor/],
defaultAttribute: 'async'
})
]
};
package.json
"dependencies": {
...
},
"devDependencies": {
"angular-mocks": "^1.5.8",
"autoprefixer": "^6.5.3",
"chai": "3.5.0",
"colors": "1.0.3",
"concurrently": "^2.2.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-batch": "^1.0.5",
"gulp-sass": "^2.3.1",
"gulp-sass-lint": "^1.2.0",
"gulp-sourcemaps": "^1.6.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",
"image-webpack-loader": "^2.0.0",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"mocha": "3.1.0",
"ng-annotate-webpack-plugin": "^0.1.3",
"ng-cache-loader": "0.0.21",
"ngtemplate-loader": "^1.3.1",
"node-sass": "^3.13.0",
"nodemon": "1.2.1",
"postcss-loader": "^1.2.0",
"resolve-url-loader": "^1.6.0",
"rimraf": "^2.5.4",
"sass-loader": "^4.0.2",
"sassdoc": "^2.1.20",
"script-ext-html-webpack-plugin": "^1.3.0",
"strip-loader": "^0.1.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-merge": "^0.14.1"
}