Something happened recently as this was working fine. I am unable to debug vue files in the sources tab like I used to do.
Currently it shows different versions of each vue file, and all of them are compressed, and they don't show the file. Also extra folders like lang sync^\ that I did not created.
I tried to add a workspace in Filesystem Tab, it did not help.
I looked in Chrome, and Firefox and both have the same problem.
This is the webpack code.
module.exports = env => {
return {
mode: 'development',
entry: {
main: ['babel-polyfill', './src/js/main.js']
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: [
/node_modules/
]
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
outputPath: (url, resourcePath, context) => {
if (url.indexOf('logo') !== -1) {
return `./brand/${env}/${url}`;
}
return `./src/assets/cards/${url}`;
}
}
},
{
test: /\.(svg)$/,
loader: 'html-loader', // since svg is an inline image
options: {
name: '[name].[ext]',
outputPath: './src/assets'
}
},
{
test: /\.ico$/,
loader: 'file-loader',
options: {
name: '[name].ico',
outputPath: '/'
}
},
{
test: /\.(woff|woff2|eot|ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, // todo include svg
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './fonts'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'scss': path.resolve(__dirname, './src/scss'),
'$assets': path.resolve(__dirname, './src/assets'),
'$brand': path.resolve(__dirname, './brand')
},
modules: [
'node_modules',
path.resolve(__dirname),
path.resolve(__dirname, 'src/assets')
],
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
allowedHosts: Object.values(BRANDS),
port: PORT,
publicPath: '/dist/',
before: function (app) {
console.log('listening on ' + Object.values(BRANDS).join(' and ') + ' on port ' + PORT);
}
},
performance: {
hints: false
},
devtool: '#inline-source-map',
plugins: [
new VueLoaderPlugin(),
new webpack.DefinePlugin(processEnv),
new HtmlWebpackPlugin({ //Generates an HTML file for your application by injecting automatically all your generated bundles.
title: '...',
template: 'template.html',
filename: 'index.html',
hash: true,
meta: {
viewport: 'width=device-width,initial-scale=1,user-scalable=no'
}
}),
],
}
};
