为什么我的 webpack 生成的包在评论中显示了原始文件路径？答案

【问题标题】：Why my bundle generated by webpack is showing the original file paths in comments?为什么我的 webpack 生成的包在评论中显示了原始文件路径？
【发布时间】：2020-10-18 00:36:40
【问题描述】：

我正在使用 webpack 捆绑和缩小我的反应脚本。

在生成的 min.js 中，我可以看到有关代码部分来源的注释信息，例如：

/*!****************************************************!*\
  !*** ./app/src/products/results.js ***!
  \****************************************************/

为什么要将此信息添加到捆绑包中？我不想透露我的文件路径。

这是我的webpack：

const path = require("path");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const postcssPresetEnv = require("postcss-preset-env");

const devMode = process.env.NODE_ENV !== "production";

module.exports = {
    mode: devMode ? "development" : "production",
    entry: {
        "results.min": [
            "./app/src/products/results.js"
        ]
    },
    output: {
        path: path.resolve(__dirname, "dist"), 
        publicPath: "/css",
        filename: "js/[name].js"
    },
    optimization: {
      minimize: true,
      minimizer: [new UglifyJsPlugin({
        include: /\.min\.js$/
      })]
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './'
    },
    module: {
        rules: [
            {
                test: /\.(c|sa|sc)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                            importLoaders: 2
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true,
                            ident: "postcss",
                            plugins: devMode
                                ? () => []
                                : () => [
                                    postcssPresetEnv({
                                        browsers: [">1%"]
                                    }),
                                    require("cssnano")()
                                ]
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|content\/components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                        plugins: ["@babel/plugin-proposal-class-properties"]
                    }
                }
            },
            {
                test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf|svg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            publicPath: "../images",
                            emitFile: false
                        } 
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanAfterEveryBuildPatterns: ['dist']
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].min.css"
        })
    ]
};

【问题讨论】：

标签： webpack atlassian-sourcetree webpack-4 bundling-and-minification

【解决方案1】：

我怀疑这是因为您在 webpack 配置中的几个位置启用了源映射。

例如

devtool: 'inline-source-map',

尝试为您的生产版本禁用源映射。

附注：如果您想为开发构建保留源映射，您可能需要将 webpack 配置拆分为单独的文件，即一个用于开发，一个用于生产。

【讨论】：