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

bjo*_*n_h 5 source-maps webpack vue.js

编辑 [2019年7月23日]

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

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

在此输入图像描述

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

在此输入图像描述

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

上一期文本

几天后,我的 .vue 文件的源映射不再包含原始代码 (sourcesContent)。Webpack 生成了许多源映射文件,但它们都不包含实际代码:只有缩小或以其他方式“压缩”的代码版本,这些版本不太可用。它们看起来像这样: 在此输入图像描述 在此输入图像描述 在此输入图像描述 在此输入图像描述

我的项目中的 Typescript (.ts) 文件看起来几乎正确,但仍然包含一些细微的修改,例如:

在此输入图像描述

我尝试过的: - 我搜索了 Stackoverflow,发现了许多类似的问题(例如WebPack sourcemaps 混淆(重复的文件))以及可能的修复,但没有一个解决了我的问题;- 我将最新的(Webpack)更改与大约一周(和两周)前的更改进行了比较,当时一切正常。我还将它与一个非常相似的项目进行了比较,该项目仍然生成正确的源映射,包括 .vue 文件。- 我已经尝试了 Webpack 配置中“devtool”设置的各种设置,但没有任何帮助。- 我没有使用 Uglify(当人们对源映射有问题时会经常提到 Uglify),所以这不可能是问题;- 我尝试更新一些与构建相关的包,以便它们与仍然正常工作的项目的包相同,但问题仍然存在。- 我检查了不同的浏览器,但 Chrome 和 Firefox 中都出现了问题(并且我检查了它们的源映射设置是否设置为“打开”,因为其他项目正在使用相同的设置,所以它们必须如此)。我什至尝试过 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",
Run Code Online (Sandbox Code Playgroud)

devDependency 看起来像这样:

"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"   },
Run Code Online (Sandbox Code Playgroud)

我的 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"
                }
            }
        }
    } };
Run Code Online (Sandbox Code Playgroud)

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

bjo*_*n_h 2

In the end, it turned out to be a source maps caching issue...! Which seems like a "duh!" solution to the problem, but it is not, really.

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

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