For better debugging we decided to use a Webpack Bugsnag package . It helps automating source map uploads on npm run prod. For sending source files/ maps to Bugsnag we are now using the following in webpack.mix.js:
const mix = require('laravel-mix')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { BugsnagSourceMapUploaderPlugin } = require('webpack-bugsnag-plugins')
...
if (mix.inProduction()) {
mix.webpackConfig({
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: false,
protectWebpackAssets: true,
cleanOnceBeforeBuildPatterns: ['js/components/*'],
}),
new BugsnagSourceMapUploaderPlugin({
apiKey: process.env.BUGSNAG_API_KEY,
appVersion: process.env.BUGSNAG_APP_VERSION,
publicPath: '*/js'
})
],
output: {
chunkFilename: 'js/components/[name].js?id=[contenthash]',
},
})
} else {
mix.webpackConfig({
output: {
chunkFilename: 'js/components/[name].js',
},
});
}
...
The issue is that this way the production sites now also load requests for source files. We do however not put source maps on the production servers. We only intend to upload them to Bugsnag.
I opened up a ticket with https://github.com/bugsnag/webpack-bugsnag-plugins/issues/69 on this, but as this is Laravel / Vue and Laravel Mix specific I was hoping to get some pointers here.
Exclude Source Maps on Production
What should I do to keep Bugsnag in the loop and send source files using their Webpack Bugsnag Plugins without added source file requests in production code?
Possible Solutions?
Was thinking I could do a second block and avoid the output. Other option is using https://github.com/yansern/laravel-mix-environments and only sending using mix.inTest() or mix.inDevelopment() so build when NODE_ENV is set for these environments.
But I must not be the only one doing this out here, right? Anyone care to share a setup?