웹 팩을 사용하여 라이브러리 소스 맵을 로드하는 방법

웹 팩을 사용하여 라이브러리 소스 맵을 로드하는 방법

웹 팩으로 두 개의 프로젝트를 만들고 있습니다. 하나는 라이브러리입니다.

래퍼 프로젝트를 작성할 때 라이브러리 프로젝트의 소스 맵을 사용할 수 있습니까?래퍼 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
        })
    ]
};

드디어 내 문제를 알아냈어

소스 맵 로더의 힌트에 대해 @BinaryMuse님 감사합니다.처음에는 잘 되지 않았지만, 이 방법은 정말 올바른 방법이었다.

결국 깨달은 것은, 이 기능을 유효하게 할 필요가 있다는 것입니다.source-map-loader"my-lib" 및 "my-ui"의 웹 팩에 사용됩니다.없이.source-map-loader"my-lib" 웹 팩 구성에서는source-map-loader"my-lib"의 전이 종속성에 대한 소스 맵을 찾을 수 없기 때문에 "my-ui" 오류(슬프게도 경고 메시지 포함)가 표시됩니다.듣자하니 소스 맵이 너무 좋아서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/}
    ]
}

제 답변은 @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의 devtools에서 traceback을 클릭했을 때 사용하던 종속성의 TypeScript 소스 코드를 보았습니다.의 Webpack 문서를 참조해 주세요.

사용하고 있다create-react-app(실행하지 않고) 이렇게 수정했습니다.ejectcmd)

주의: 앱이 이미 오버라이드된 경우webpack config사용.react-app-rewired처음 세 단계는 무시할 수 있습니다.

• npm i react-app-rewired -D- 이 기능을 사용하면webpack배열.
• package.json- 스크립트 변경, 치환react-scripts와 함께react-app-rewired

  "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맵 파일의 경로에 따라 다른 위치에 로드됩니다.를 끈기 있게 : ) check모 、 : check 、 check check check check check check 。 : )

1. 중 1. 소스 맵은 다음 중 하나).localhost:3000 ★★★★★★★★★★★★★★★★★」webpack:/// 2. ) xxx.disc.map 을 사용하는 .rollupoutputlibs)에 (output.libs).). sourcemapPathTransform을 로드하는 데 도움이 됩니다.sourcemaps적절한 위치에 있습니다.

웹 팩에서 제공하는 모든 평가 소스 맵 옵션을 사용할 수 있어야 합니다.

은 올바른 것과 .devtooloption の optionwebpack.config.js★★★★★★★★★★★★★★★★의 경우my-lib프로젝트.

devtool: 'eval',

eval ★★★★★★★★★★★★★★★★★」eval-source-map하다, 이, 랬다, 이, 이, 랬다

다양한 옵션에 대해서는, Web pack 의 메뉴얼을 참조해 주세요.

언급URL : https://stackoverflow.com/questions/32702478/how-to-load-library-source-maps-using-webpack