如何在使用babel和webpack时生成源图？

问题描述

我是webpack的新手，我需要设置一下来生成源图。我正在从命令行运行 webpack serve ，它已成功编译。但我真的需要源图。这是我的 webpack.config.js 。

I'm new to webpack, and I need a hand in setting up to generate sourcemaps. I'm running webpack serve from the command line, which compiles successfully. But I really need sourcemaps. This is my 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的新手，看起来虽然文档没有真正帮助我我不确定这个问题的具体内容。

I'm really new to webpack, and looking though the docs hasn't really helped as I'm not sure what this problem is specific to.

推荐答案

为了使用源地图，你应该改变选项值来自 true 到值 > 此列表 ，例如 source-map

In order to use source map, you should change devtool option value from true to the value which available in this list, for instance source-map

devtool: 'source-map'

这篇关于如何在使用babel和webpack时生成源图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！