We are using webpack version 1.x. I’m playing with source-maps file and how to use it in Chrome along with the minified/uglified javascript code. Below is my webpack config. I’m wondering why the contents of the map file is so small when devtools property exists.
Here is the contents of the map file when devtool property exists
{"version":3,"sources":[],"names":[],"mappings":"","file":"assets/js/app.bundle91fcf20badcbd3698f33.min.js","sourceRoot":""}
If devtool entry is not present in the webpack config, the map file will properly be generated.
Here is my webpack config. In the console, I execute it like this, npm run build:prod
var path = require('path');
var merge = require('webpack-merge');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = require('tools-configurations/webpack.config.js');
var isBuildForProd = (process.env.npm_lifecycle_event === 'build:prod');
webpackConfig = merge(webpackConfig, {
entry: {
app: [path.resolve(__dirname, 'entry_points', 'app', 'index.js')]
},
output: {
path: path.resolve(__dirname, 'dist', 'app'),
publicPath: '/app/'
},
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
Promise: 'bluebird',
Basil: 'basil.js'
}),
new HtmlWebpackPlugin({
title: 'App Entertainment',
favicon: 'assets/images/favicon.ico',
inject: 'body',
template: path.resolve(__dirname, 'node_modules', 'apps-shared', 'assets', 'partials', 'index.html'),
chunks: ['app']
})
],
module: {
loaders: [
{
test: /fonts\/.+\.svg(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=assets/fonts/[hash].[ext]'
}
]
}
});
if (isBuildForProd) {
webpackConfig = merge(webpackConfig, {
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'distprod', 'app'),
publicPath: '/app/'
},
plugins: [
new webpack.SourceMapDevToolPlugin({
filename: '[file].map',
append: `\n//# sourceMappingURL=//internal-svr:3333/[url]`
})
]
});
}
webpackConfig.resolve.root.unshift(
path.resolve(__dirname, 'node_modules', 'apps-shared', 'overrides')
);
module.exports = webpackConfig;
After reading other issues posted here, I learned that devtool should not be used if you are already using SourceMapDevToolPlugin. My question now is, if we are using SourceMapDevToolPlugin how can we specify the type of devtool we like? I’m referring to the devtool choices mentioned on this link – https://webpack.github.io/docs/configuration.html#devtool