如何使用 webpack 加載庫源映射？

Question

我正在用 webpack 構建兩個項目； 一個是另一個的圖書館。

構建包裝器項目時是否可以使用我的庫項目中的源映射？ 我希望能夠從我的包裝器 UI 調試我的庫代碼。

我的構建工作正常，因為庫是內置的。唯一的問題是源映射。 我在瀏覽器調試器中看到的 JavaScript 是丑化的，因為源映射不可用。

我的項目結構的片段：

+-- my-ui/
    +-- dist/
        +-- my-ui.js
        +-- my-ui.js.map
    +-- node_modules/
        +-- my-lib/
            +-- dist/
                +-- bundle.js
                +-- bundle.js.map

來自webpack.config.js的片段：

module.exports = {
    entry: './src/js/main.jsx',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'my-ui.js',
        library: 'my-ui',
        libraryTarget: 'umd'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {test: /\.jsx?$/, loader: 'babel', include: path.join(__dirname, 'src')}
        ]
    },
    plugins: [
        new Clean('dist'),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            inject: true
        })
    ]
};

Answer 1

我終於知道我的問題了...

感謝 @BinaryMuse 提供有關source-map-loader 的提示。 這確實是正確的方法，盡管它最初對我不起作用。

我最終意識到我需要在“my-lib”和“my-ui”中為 webpack 啟用source-map-loader 。 如果沒有source-map-loader在“我的-LIB”的WebPack配置時， source-map-loader里面的“我的UI”的錯誤（與可悲的是一條警告消息），因為它無法找到來源映射為“我的-LIB”的傳遞依賴. 顯然，源映射非常好，以至於source-map-loader能夠查看依賴樹的所有方面。

另外值得注意的是，我在使用source-map-loader和react-hot-loader遇到了一個問題。 看， react-hot-loader不包括源映射。 當source-map-loader試圖找到它們時（因為它只是掃描所有內容），它無法並中止所有內容。

最終，我希望source-map-loader具有更高的容錯性，但是如果設置正確，它確實可以工作！

devtool: 'source-map',
module: {
    preLoaders: [
        {test: /\.jsx?$/, loader: 'eslint', exclude: /node_modules/},
        {test: /\.jsx?$/, loader: 'source-map', exclude: /react-hot-loader/}
    ],
    loaders: [
        {test: /\.jsx?$/, loader: 'raect-hot!babel', exclude: /node_modules/}
    ]
}

Answer 2

我的回答類似於@Jeff Fairley 的，我有相同的目錄結構，唯一的區別是我使用的是module: { rules: [] }而不是他的module: { preLoaders: [..], loaders: [...]} 。 這是我必須添加到我的 webpack.config.js 文件中的內容：

  mode: 'development',
  devtool: 'eval-source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      }
    ]
  },

然后我跑了

npm i -D source-map-loader

我在 Chrome 的開發工具中點擊回溯時看到了我使用的依賴項的 TypeScript 源代碼。 有關source-map-loader的信息，請參閱 Webpack 文檔。

Answer 3

您應該能夠使用 Webpack 提供的任何eval源映射選項。

實際上，這相當於在您的webpack.config.js為my-lib項目設置正確的devtool選項。

devtool: 'eval',

eval和eval-source-maps應該都可以工作。

有關各種選項，請參閱Webpack 源映射文檔。

Answer 4

我正在使用create-react-app ，這就是我修復它的方式（不運行eject cmd）

注意：如果您的應用程序已經使用react-app-rewired webpack config覆蓋了webpack config您可以忽略前三個步驟。

• npm i react-app-rewired -D - 這將幫助您覆蓋webpack配置。
• package.json - 改變你的腳本，用react-app-rewired替換react-scripts

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }

• config-overrides.js - 在應用程序的父級創建此文件。

• npm i source-map-loader -D - 加載源映射（假設你的 lib 的 dist 有源映射文件）。 不要緊，它的構建工具（如： Rollup ， webpack或parcel ）用來生成sourcemap 。

• 在config-overrides.js復制以下代碼

module.exports = {
  webpack: (config, env) => {
    // Load source maps in dev mode
    if (env === 'development') {
      config.module.rules.push({
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        use: ['source-map-loader'],
        enforce: 'pre',
      });

      // For `babel-loader` make sure that sourceMap is true.
      config.module.rules = config.module.rules.map(rule => {
        // `create-react-app` uses `babel-loader` in oneOf
        if (rule.oneOf) {
          rule.oneOf.map(oneOfRule => {
            if (
              oneOfRule.loader &&
              oneOfRule.loader.indexOf('babel-loader') !== -1
            ) {
              if (oneOfRule.hasOwnProperty('options')) {
                if (oneOfRule.options.hasOwnProperty('sourceMaps')) {
                  // eslint-disable-next-line no-param-reassign
                  oneOfRule.options.sourceMaps = true;
                }
              }
            }
          });
        }
        return rule;
      });
    }

    return config;
  },
};

• 重新啟動您的應用程序（如果它已經在運行）。 source files根據地圖文件中的路徑加載到不同的位置。 耐心檢查所有文件夾:)

注意：1.您的源映射根據它從 xxx.js.map 文件讀取的路徑加載到文件夾之一（例如： localhost:3000或webpack:/// ）。 2. 如果你正在為你的庫使用rollup ，請確保你在配置文件（output.sourcemapPathTransform）中提供了正確的路徑，這將有助於在正確的位置加載sourcemaps 。

Answer 5

很好的解決方案！ 它可以在我們復雜的工作環境中工作。 感謝您解決。