Webpack 2 source-map are not generating for javascript and css. It doesn't even show error. I used same syntax as the official documentation. I even added uglifyJs plugin sourcemap parameter to true. Can anybody please help me?
Below is my webpack config
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');
const extractSass = new ExtractTextPlugin({
filename: "vendor-styles.css"
});
module.exports = {
entry: './js/app/index.js',
output: {
path: path.resolve(__dirname, "./js/dist/"),
filename: "[name].js"
},
devtool: "source-map",
plugins: [
extractSass,
new webpack.ProvidePlugin({
Promise: 'es6-promise-promise',
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
new webpack.optimize.UglifyJsPlugin({sourceMap: true})
],
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: [
'env',
'react'
]
}
},
{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader",
options: {
sourceMap: true,
importLoaders: true
}
}, {
loader: "sass-loader",
options: {
sourceMap: true
}
}],
// use style-loader in development
fallback: "style-loader"
})
},
{
test: /\.css$/,
use: extractSass.extract({
use: [{
loader: "css-loader",
options: {
sourceMap: true,
importLoaders: true
}
}],
// use style-loader in development
fallback: "style-loader"
})
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: "url-loader?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: "url-loader?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: "url-loader?limit=10000&mimetype=application/octet-stream&name=/css/fonts/[name].[ext]"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: "file-loader?name=/css/fonts/[name].[ext]"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: "url-loader?limit=10000&mimetype=image/svg+xml&name=/css/fonts/[name].[ext]"
},
{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url-loader'
},
]
}
}
I had the same problem but I finally got webpack to spit out sourcemaps for my .jsx files, by using the SourceMapDevToolPlugin. I straight copied it from the example in the docs; https://webpack.js.org/plugins/source-map-dev-tool-plugin/
Hope it helps :)
在条目devtool: 'cheap-module-eval-source-map',
之前添加以下代码行devtool: 'cheap-module-eval-source-map',
然后在调试器中应获取错误的确切行号。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.