ฉันจะสร้างซอร์สโค้ดได้อย่างไรเมื่อใช้ Babel และ webpack

ฉันใหม่กับ webpack และฉันต้องการมือในการตั้งค่าเพื่อสร้างซอร์สแผนที่ ฉันทำงาน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ตัวเลือกจากเป็นค่าที่มีอยู่ในตัวอย่างเช่นtruethis listsource-map

devtool: 'source-map'

devtool: 'source-map'- SourceMap ถูกปล่อยออกมา

บางทีคนอื่นอาจมีปัญหานี้ ณ จุดหนึ่ง หากคุณใช้UglifyJsPluginในwebpack 2คุณจะต้องระบุการsourceMapตั้งค่าสถานะ ตัวอย่างเช่น:

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

กำหนดค่า webpack ขั้นต่ำสำหรับ jsx ด้วย sourcemaps:

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 +คุณสามารถลองสิ่งนี้ในการกำหนดค่าของคุณ:

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

จากเอกสาร:

• devtool: "eval-cheap-module-source-map"เสนอ SourceMaps ที่แมปบรรทัดเท่านั้น (ไม่มีการแมปคอลัมน์) และเร็วกว่ามาก
• devtool: "source-map"ไม่สามารถแคช SourceMaps สำหรับโมดูลและจำเป็นต้องสร้าง SourceMap ที่สมบูรณ์ใหม่สำหรับ chunk มันเป็นอะไรบางอย่างสำหรับการผลิต

ฉันใช้ webpack 2.1.0-beta.19

บน Webpack 2 ฉันลองทั้ง 12 ตัวเลือก devtool ตัวเลือกต่อไปนี้ลิงก์ไปยังไฟล์ต้นฉบับในคอนโซลและเก็บรักษาหมายเลขบรรทัด ดูหมายเหตุด้านล่างนี้: บรรทัดเท่านั้น

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

devtool ตัวเลือก dev ที่ดีที่สุด

                                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 ... เวลาที่สร้างใหม่ในแผนที่ต้นทางซอร์สคือ ~ 7s

แม้กระทั่งปัญหาเดียวกันที่ฉันพบในเบราว์เซอร์ก็แสดงรหัสที่คอมไพล์แล้ว ฉันได้ทำการเปลี่ยนแปลงด้านล่างในไฟล์ config ของ 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' }
]