使用 babel 和 webpack 时如何生成 sourcemap? [英] How do I generate sourcemaps when using babel and webpack?

问题描述

我是 webpack 的新手，我需要手动设置以生成源映射.我正在从命令行运行 webpack serve，它编译成功.但我真的需要源图.这是我的 webpack.config.js.

var webpack = require('webpack');模块.出口 = {输出: {文件名:'main.js',公共路径:'/资产/'},缓存:真实，调试:真的，开发工具:真的，入口: ['webpack/hot/only-dev-server','./src/components/main.js'],统计:{颜色:真实，理由:真实},解决: {扩展名:[''，'.js'，'.jsx']，别名:{'styles': __dirname + '/src/styles','mixins': __dirname + '/src/mixins','组件': __dirname + '/src/components/','商店': __dirname + '/src/stores/','动作':__dirname + '/src/actions/'}},模块: {预加载器:[{测试:/.(js|jsx)$/,排除:/node_modules/，加载器:'jsxhint'}],装载机:[{测试:/.(js|jsx)$/,排除:/node_modules/，loader: 'react-hot!babel-loader'}, {测试:/.sass/，loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'}, {测试:/.scss/，loader: 'style-loader!css!sass'}, {测试:/.(png|jpg|woff|woff2)$/,loader: 'url-loader?limit=8192'}]},插件: [新的 webpack.HotModuleReplacementPlugin(),新的 webpack.NoErrorsPlugin()]};

我对 webpack 真的很陌生，虽然文档并没有真正帮助我，因为我不确定这个问题具体是什么.

解决方案

为了使用 source map，你应该改变 devtool 选项 value 从 true 到 value"https://webpack.js.org/configuration/devtool/" rel="noreferrer">这个列表，例如source-map

devtool: 'source-map'

<块引用>

devtool: 'source-map' - 发出一个 SourceMap.

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()
  ]

};

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.

解决方案

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'

devtool: 'source-map' - A SourceMap is emitted.

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