webpack获取未在浏览器上转译的源文件

Question

我想在浏览器上查看原始源代码（在开发环境中）进行调试。

我在使用源地图时遇到了一些问题。

例如在这个问题中，我将使用 React 组件的源代码 src/DefaultLoadingComponent.js：

const DefaultLoadingComponent = ({
    SkeletonProps = {}
}) => {

const classes = makeStyles(themeMaker)();    

return (       
    <Skeleton 
        animation="pulse" 
        variant="rect" 
        height={40} 
        className={classes.rounded5}
        {...SkeletonProps}
    />
)}

使用

devtool: "source-map"

dist 文件夹下创建.map 扩展名的文件，在浏览器中看不到源文件，所以无法调试。

在 dist/main.js.map 中我可以看到预期的源代码。

const DefaultLoadingComponent = ({\n    SkeletonProps = {}\n}) => {\n\n    const classes = makeStyles(themeMaker)();    \n\n    return (       \n        <Skeleton \n            animation=\"pulse\" \n            variant=\"rect\" \n            height={40} \n            className={classes.rounded5}\n            {...SkeletonProps}\n        />\n    )

我得到了同样的结果：

devtool: false,
plugins: [new webpack.SourceMapDevToolPlugin({
    filename: '[name].js.map',
    publicPath: absolute_url_to_dist_folder
})]

使用

devtool: "eval-source-map"

.map 扩展名的文件不是在 dist 文件夹下创建的，在浏览器中我可以看到 /top/webpack-internal:// 下的转译文件。 内容取决于 babel-loader 配置或 .babelrc 内容。

这里是 package.json 中与 babel 相关的 devDependencies：

1. “@babel/core”：“^7.14.6”
2. "@babel/plugin-proposal-class-properties": "^7.14.5",
3. "@babel/preset-env": "^7.14.5",
4. "@babel/preset-react": "^7.14.5",
5. “babel-loader”：“^8.2.2”

这是.babelrc文件内容：

{
"presets": [
    [ 
        "@babel/preset-env", {
            "modules": "auto",
            "targets": {
                "browsers": [
                    "last 2 Chrome versions",
                    "last 2 Firefox versions",
                    "last 2 Safari versions",
                    "last 2 iOS versions",
                    "last 1 Android version",
                    "last 1 ChromeAndroid version",
                    "ie 11"
                ]
            }
        }
    ],
    ["@babel/preset-react"]
],
"compact" : "auto",
}

在 top/webpack-instal://src/DefaultLoadingComponent.js 下的浏览器我得到：

var DefaultLoadingComponent = function DefaultLoadingComponent(_ref) {
  var _ref$SkeletonProps = _ref.SkeletonProps,
      SkeletonProps = _ref$SkeletonProps === void 0 ? {} : _ref$SkeletonProps;
  var classes = (0,_mui_styles__WEBPACK_IMPORTED_MODULE_2__.default)(_lib_theming__WEBPACK_IMPORTED_MODULE_1__.default)();
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_mui_material_Skeleton__WEBPACK_IMPORTED_MODULE_3__.default, _extends({
    animation: "pulse",
    variant: "rect",
    height: 40,
    className: classes.rounded5
  }, SkeletonProps));
};

Webpack版本是：5.39.0，这里是webpack.config.js的内容：

{
    context: __dirname,
    entry: {main: './src/index.js'},
    output: {
        path: path.resolve(
            __dirname,
           '../dist',
        ),
        filename: '[name].js',
        publicPath: '/',
        library: 'MyLib',
        
    },
    devtool:'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                },
                exclude: path.resolve(__dirname, 'node_modules/'),
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates style nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|j?g|svg|gif)?$/,
                loader: 'file-loader',
                options: {
                    publicPath:'/wp-content/plugins/myplugin/lib/dist' 
                },
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin({}),           
    ],
}

有什么方法可以调试浏览器上的未转译文件？

Answer 1

所有配置都很好。 Chrome 未启用 Javascript 源映射。

现在webpack是这样配置的：

devtool: mode === 'development'
            ? 'eval-cheap-module-source-map'
            : 'source-map',

源文件位于 webpack://MyLib/./src/