vue.js - 某些 .vue(和 .ts)文件的 Webpack 源映射不再包含原始代码(sourcesContent)

Question

编辑 [23-7-2019]

经过进一步研究，我发现并非所有 .vue 文件都有这个问题。有些仍然显示原始源代码。
看起来使用的加载器之一，可能是问题的罪魁祸首(“vue-loader”作为我的第一个“目标”)。

在显示源代码的文件中，源映射文件的相关部分如下所示:



而没有源代码的文件中源映射的相同部分，如下所示:



所以出于某种原因，后一种类型的文件似乎缺少 vue-loader 的“和谐默认导出”。

上一期正文

几天后，我的 .vue 文件的源映射不再包含原始代码 (sourcesContent)。
许多源映射文件是由 Webpack 生成的，但没有一个包含实际的代码:只有代码的缩小或“压缩”版本，它们不太实用。它们看起来像这样:





我的项目中的 Typescript (.ts) 文件看起来几乎是正确的，但仍然包含一些小的修改形式，例如:



我尝试过的:
- 我搜索了 Stackoverflow，并发现了许多类似的问题(例如 WebPack sourcemaps confusing (duplicated files) )以及可能的修复，但没有一个解决了我的问题；
- 我将我最新的(Webpack)更改与大约一周(和两周)前的更改进行了比较，当时一切正常。我也把它比作一个非常
仍然生成正确源映射的类似项目，包括
对于 .vue 文件。
- 我在 Webpack 配置中尝试了“devtool”设置的各种设置，但没有任何帮助。
- 我没有使用 Uglify(当人们对源映射有问题时会经常提到它)，所以这不是问题；
- 我已经尝试更新一些与构建相关的包，以便它们与仍然正常工作的项目相同，但问题仍然存在。
- 我检查了不同的浏览器，但问题出现在 Chrome 和 Firefox 中(并且我检查了它们的源映射设置是否设置为“on”，因为另一个项目使用相同的设置，它们必须如此)。我什至尝试过 IE11，但这也无济于事。

我在 package.json 中的启动脚本如下所示:

 "build-watch": "webpack -d --watch true --config webpack.dev.config.js",
 "build-release": "webpack -p --config webpack.production.config.js",
 "build-dev": "webpack -d --config webpack.dev.config.js",

devDependencies 如下所示:

"devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-typescript": "^7.3.3",
    "@types/bootstrap": "^4.3.1",
    "@types/jest": "^24.0.15",
    "@types/jquery": "^3.3.30",
    "@types/webpack": "^4.4.35",
    "@vue/cli-plugin-e2e-cypress": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.2",
    "@vue/cli-plugin-typescript": "^3.9.0",
    "@vue/cli-plugin-unit-jest": "^3.9.0",
    "@vue/cli-service": "^3.9.3",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "assets-webpack-plugin": "^3.9.10",
    "babel-loader": "^8.0.6",
    "babel-preset-vue": "^2.0.2",
    "cache-loader": "^4.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.1.0",
    "cssnano": "^4.1.10",
    "cypress": "^3.4.0",
    "es6-promise": "^4.2.8",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.2.3",
    "globule": "^1.2.1",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-increase-specificity": "^0.6.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "ts-jest": "^24.0.2",
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.3",
    "url-loader": "^2.0.1",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.36.1",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.6"   },

我的 Webpack 开发配置中最相关的部分(不包括与 webfonts 相关的内容)是这些:

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const bundleOutputDir = './wwwroot/dist';
const NODE_PATH = path.join(__dirname, "node_modules");
const CACHE_PATH = path.join(NODE_PATH, '.cache/vue');
const VUE_VERSION = require('vue/package.json').version;
const VUE_LOADER_VERSION = require('vue-loader/package.json').version;

const bundleConfig = require('./bundles.config.js');
const buildId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);

const config = {
    entry: bundleConfig.entries,
    output: {
        path: path.join(__dirname, bundleOutputDir),
        filename: '[name].js',
        publicPath: 'dist/'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                exclude: [
                    path.resolve(__dirname, "wwwroot", "Content"),
                    path.resolve(__dirname, "src", "common")
                ],
                use: [
                    'vue-style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.css$/,
                include: [
                    path.resolve(__dirname, "wwwroot", "Content"),
                    path.resolve(__dirname, "src", "common")
                ],
                use: [
                    'vue-style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    cacheDirectory: CACHE_PATH,
                    cacheIdentifier: [
                        'development',
                        webpack.version,
                        VUE_VERSION,
                        VUE_LOADER_VERSION
                    ].join('|')
                }
            },
            {
                test: /\.tsx$/,
                loaders: 'babel-loader',
                include: /src/
            },
            {
                test: /\.ts$/,
                loaders: 'ts-loader',
                include: /src/,
                options: {
                    appendTsSuffixTo: [
                        /\.vue$/
                    ]
                }
            }, ...
        ]
    },
    devtool: "cheap-module-eval-source-map",
    resolve: {
        extensions: [
            '.js',
            '.vue',
            '.tsx',
            '.ts'
        ],
        alias: {
            '~@': path.resolve('src'),
            'vue$': 'vue/dist/vue.esm.js',
            'bootstrap-vue$': 'bootstrap-vue/dist/bootstrap-vue.esm.js'
        }
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.ProvidePlugin({
            'Promise': 'es6-promise'
        }),
        new CleanWebpackPlugin(),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new MiniCssExtractPlugin({ filename: "[name].css" }),
        new OptimizeCssAssetsPlugin({
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
                preset: ['default', { discardComments: { removeAll: false } }],
            }
        }),
        new webpack.WatchIgnorePlugin([
            /\.d\.ts$/
        ]),
        new AssetsPlugin({
            filename: 'webpack.assets.json',
            path: bundleOutputDir,
            prettyPrint: true,
            metadata: { buildId: buildId }
        })
    ],
    stats: {
        modules: false,
        entrypoints: false,
        children: false
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    chunks: "all"
                }
            }
        }
    } };

我已经完全没有线索了，所以如果有人能提供一些，那就太好了!

Answer 1

最后竟然是一个source maps缓存 问题...!这似乎是一个“废话!”问题的解决方案，但事实并非如此。

因为，事实证明 Chrome 对源映射的缓存非常持久(至少在我看来是这样)。
每当我开始调试时，我都会使用 Visual Studio 2019 的 Debug 选项。然后它将启动一个新的 Chrome 实例来进行调试/测试。我一直认为这已经完成，以确保您使用的是“新鲜”版本浏览器的(例如，具有空缓存等)。事实证明，这不适用于此浏览器实例的源映射......!
我发现缓存是问题所在，因为我在“常规”Chrome 中打开了一个窗口，该窗口也设置为本地开发环境。我决定看看源 map 是如何显示在那里的，更多是为了自娱自乐，而不是因为我认为这会导致任何事情。在该浏览器中，显示了正确的源映射。
所以我回到了我的(仍然打开的)Chrome 开发实例。在那，我已经在 devtools 中禁用了缓存，无论是在设置中还是通过网络选项卡上的复选框。但是源映射仍然被缓存。所以我通过 Chrome 的常规设置清空了浏览器缓存。但是源映射仍然被缓存。我更改了 Visual Studio 中的设置以打开隐身版本的 Chrome 进行调试。即使是现在，我仍然在那里看到不正确/旧的源映射(虽然它们在常规浏览器实例中显示得很好)...

这一切都非常奇怪，但至少我现在可以再次开始工作/调试了!