[javascript] babel 및 webpack을 사용할 때 소스 맵을 어떻게 생성합니까?

JAVASCRIPT / 글쓴이

나는 웹팩을 처음 접했고 소스 맵을 생성하도록 설정해야한다. webpack serve성공적으로 컴파일되는 명령 줄에서 실행 중 입니다. 하지만 정말 소스 맵이 필요합니다. 이것은 나의webpack.config.js 입니다.

var webpack = require('webpack');

module.exports = {

  output: {
    filename: 'main.js',
    publicPath: '/assets/'
  },

  cache: true,
  debug: true,
  devtool: true,
  entry: [
      'webpack/hot/only-dev-server',
      './src/components/main.js'
  ],

  stats: {
    colors: true,
    reasons: true
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      'styles': __dirname + '/src/styles',
      'mixins': __dirname + '/src/mixins',
      'components': __dirname + '/src/components/',
      'stores': __dirname + '/src/stores/',
      'actions': __dirname + '/src/actions/'
    }
  },
  module: {
    preLoaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'jsxhint'
    }],
    loaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel-loader'
    }, {
      test: /\.sass/,
      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
    }, {
      test: /\.scss/,
      loader: 'style-loader!css!sass'
    }, {
      test: /\.(png|jpg|woff|woff2)$/,
      loader: 'url-loader?limit=8192'
    }]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]

};

나는 webpack을 처음 접했고 문서가 도움이되지는 않았지만이 문제가 무엇인지 확실하지 않기 때문에 실제로 도움이되지 않았습니다.

답변

소스 맵을 사용하려면 변경해야합니다 devtool 옵션 값을 에서 true받는 값 을 사용할 수있는 this list예를 들어,source-map

devtool: 'source-map'

devtool: 'source-map'-SourceMap이 방출됩니다.

답변

다른 사람이 한 시점에서이 문제를 겪을 수도 있습니다. UglifyJsPluginin 을 사용하는 경우 webpack 2명시 적으로 sourceMap플래그를 지정해야합니다 . 예를 들면 다음과 같습니다.

new webpack.optimize.UglifyJsPlugin({ sourceMap: true })

답변

소스 맵이있는 jsx에 대한 최소 웹팩 구성 :

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: `./src/index.jsx` ,
  output: {
    path:  path.resolve(__dirname,"build"),
    filename: "bundle.js"
  },
  devtool: 'eval-source-map',
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

그것을 실행 :

Jozsefs-MBP:react-webpack-babel joco$ webpack -d
Hash: c75d5fb365018ed3786b
Version: webpack 1.13.2
Time: 3826ms
        Asset     Size  Chunks             Chunk Names
    bundle.js   1.5 MB       0  [emitted]  main
bundle.js.map  1.72 MB       0  [emitted]  main
    + 221 hidden modules
Jozsefs-MBP:react-webpack-babel joco$

답변

dev + production을 최적화 하면 구성에서 다음과 같이 시도 할 수 있습니다.

{
  devtool: dev ? 'eval-cheap-module-source-map' : 'source-map',
}

문서에서 :

  • devtool : “eval-cheap-module-source-map” 은 행만 매핑하고 (열 매핑은 없음) 훨씬 빠른 SourceMap을 제공합니다.
  • devtool : “source-map” 은 모듈에 대한 SourceMap을 캐시 할 수 없으며 청크에 대한 완전한 SourceMap을 재생성해야합니다. 생산을위한 것입니다.

webpack 2.1.0-beta.19를 사용하고 있습니다

답변

Webpack 2에서는 12 가지 devtool 옵션을 모두 시도했습니다. 다음 옵션은 콘솔의 원본 파일에 연결되며 줄 번호를 유지합니다. 아래 참고 사항을 참조하십시오 : 행만.

https://webpack.js.org/configuration/devtool

devtool 최고의 개발 옵션

                                build   rebuild      quality                       look
eval-source-map                 slow    pretty fast  original source               worst
inline-source-map               slow    slow         original source               medium
cheap-module-eval-source-map    medium  fast         original source (lines only)  worst
inline-cheap-module-source-map  medium  pretty slow  original source (lines only)  best

라인 만

소스 맵은 한 줄에 단일 매핑으로 단순화됩니다. 이것은 일반적으로 명령문마다 단일 맵핑을 의미합니다 (작성한 것으로 가정). 이렇게하면 명령문 레벨에서 실행을 디버그하거나 행 열의 설정 중단 점을 막을 수 있습니다. 최소화 기는 일반적으로 단일 라인 만 방출하므로 최소화와 결합 할 수 없습니다.

이 재검토

큰 프로젝트에서 … eval-source-map rebuild time is ~ 3.5s … 인라인 소스 맵 재 구축 시간은 ~ 7 초입니다.

답변

브라우저에서 직면 한 동일한 문제조차도 컴파일 된 코드를 표시했습니다. webpack 구성 파일을 아래에서 변경했으며 현재 제대로 작동합니다.

 devtool: '#inline-source-map',
 debug: true,

로더에서 나는 babel-loader를 첫 번째 옵션으로 유지했습니다. 

loaders: [
  {
    loader: "babel-loader",
    include: [path.resolve(__dirname, "src")]
  },
  { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
  { test: /\.html$/, loader: 'raw' },
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
      'file?hash=sha512&digest=hex&name=[hash].[ext]',
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
  },
  {test: /\.less$/, loader: "style!css!less"},
  { test: /\.styl$/, loader: 'style!css!stylus' },
  { test: /\.css$/, loader: 'style!css' }
]

답변