Debugging in Chrome Sources tab showing webpack folder with multiple version of vue files

Viewed 508

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.

enter image description here

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'
            }
        }),
    ],
}
};
1 Answers

Try to add this to vue.config.js

module.exports = {
//...

configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      config.devtool = 'eval-source-map';
      config.output.devtoolModuleFilenameTemplate = info =>
        info.resourcePath.match(/\.vue$/) && !info.identifier.match(/type=script/)
          ? `webpack-generated:///${info.resourcePath}?${info.hash}`
          : `webpack-yourCode:///${info.resourcePath}`;

      config.output.devtoolFallbackModuleFilenameTemplate = 'webpack:///[resource-path]?[hash]';
    }
  },
// ...
}

Read more

Related