使用babel和webpack时如何生成源地图?

JavaScript Webpack

Vicky

2020-05-28

我是webpack的新手,我需要进行一些设置来生成Sourcemap。我正在webpack serve从命令行运行,该命令行已成功编译。但我确实需要sourcemap。这是我的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的新手,尽管我不确定这个问题是针对什么的,但是文档并没有真正帮助。

第4208篇《使用babel和webpack时如何生成源地图?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
千羽 2020.05.28

在Webpack 2上,我尝试了所有12个devtool选项。以下选项链接到控制台中的原始文件并保留行号。请参阅以下有关re:行的注释。

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的重建时间为〜3.5s ... inline-source-map的重建时间为〜7s

杜大爷 2020.05.28

也许其他人在某一时刻有这个问题。如果使用UglifyJsPluginin webpack 2,则需要显式指定sourceMap标志。例如:

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android