বাবেল এবং ওয়েবপ্যাক ব্যবহার করার সময় আমি কীভাবে উত্সম্যাপ তৈরি করতে পারি?

Question

আমি ওয়েবপ্যাকে নতুন, এবং সোর্সম্যাপ তৈরি করতে আমার হাত লাগাতে হবে। আমি 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()
  ]

};

আমি ওয়েবপ্যাকটিতে সত্যিই নতুন এবং এই সমস্যাটি কীসের সাথে সুনির্দিষ্ট তা নিশ্চিত না হওয়ায় দস্তাবেজগুলি সত্যই সহায়তা করে নি looking

Comments

এফওয়াইআই 2 র সংস্করণে ডিবাগ যুক্ত করবে না, আমি পেয়েছিThe 'debug' property was removed in webpack 2.

— শরীফ

সম্পর্কিত পোস্ট - eval এবং eval- উত্স-মানচিত্র ব্যবহার করে পার্থক্য কি?

— আরবিটি

Answer 1

উত্স মানচিত্র ব্যবহার করার জন্য, উদাহরণস্বরূপ , আপনার devtoolবিকল্পের মানটিtrue যে মানটিতে পাওয়া যায় তা থেকে পরিবর্তিত করা উচিতthis listsource-map

devtool: 'source-map'

devtool: 'source-map'- একটি উত্সম্যাপ নির্গত হয়।

Comments

denugসম্পত্তি webpack 2. সরানো হয়েছে

— jnns

@jnns কি এটি প্রতিস্থাপন?

— ব্র্যাড

আমি নিশ্চিত করতে পারি (ওয়েবপ্যাক 3.5): devtoolযথেষ্ট। কোনও ডিবাগ মান প্রয়োজন হয় না।

— ফ্রাঙ্ক নোক 14

কেবল যোগ করতে চাই আপনি যদি প্রতিক্রিয়া ব্যবহার করেন তবে আপনার জন্য এটির জন্য নির্দিষ্ট কনফিগারেশনটি তৈরি করা উচিত (ক্রিয়েট-রিএ্যাক্ট-অ্যাপ)।

— ভোর

এটি আসলে কোথায় ফাইল আউটপুট দেয়?

— মেলবোর্ন বিকাশকারী

Answer 2

এক পর্যায়ে অন্য কারও সমস্যা হতে পারে। আপনি ব্যবহার করেন তাহলে UglifyJsPluginএ webpack 2আপনি স্পষ্টভাবে নির্দিষ্ট করতে হবে sourceMapপতাকা। উদাহরণ স্বরূপ:

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

Comments

devtool: 'source-map'এটির কাজ করার জন্য আমাকেও অন্তর্ভুক্ত করতে হয়েছিল

— ভিক

আমাকে এটি সিএসএস এবং সাস লোডার বিকল্পগুলিতে অন্তর্ভুক্ত করতে হয়েছিল।

— d_rail

Answer 3

সোর্সম্যাপ সহ জেএসএক্সের জন্য ন্যূনতম ওয়েবপ্যাক কনফিগারেশন:

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$

Answer 4

যদি ডিভ + প্রোডাকশনটির জন্য অনুকূল করা হয় , আপনি আপনার কনফিগারেশনে এরকম কিছু চেষ্টা করতে পারেন:

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

দস্তাবেজগুলি থেকে:

• ডিভটোল: "ইভাল-সস্তার-মডিউল-উত্স-মানচিত্র" উত্স মানচিত্রগুলি সরবরাহ করে যা কেবলমাত্র লাইনগুলি ম্যাপ করে (কোনও কলাম ম্যাপিং নেই) এবং আরও দ্রুত
• ডিভটোল: "উত্স-মানচিত্র" মডিউলগুলির জন্য সোর্স ম্যাপগুলি ক্যাশে করতে পারে না এবং খণ্ডের জন্য সম্পূর্ণ উত্সম্যাপটি পুনরায় তৈরি করতে হবে। এটি উত্পাদন জন্য কিছু।

আমি ওয়েবপ্যাকটি 2.1.0-beta.19 ব্যবহার করছি

Comments

সাম্প্রতিক, বিল্ড + + পুনর্নির্মাণের পারফরম্যান্সের জন্য চমত্কার সুনির্দিষ্ট liste হয় সরকারী ডক্সে এখানে

— ফ্রাঙ্ক Nocke

devভেরিয়েবল সেটটি কোথায় ?

— ক্রিস

সাধারণ ক্ষেত্রে আপনি .envফাইলগুলি সংজ্ঞায়িত বা রূপান্তর করতে দেখেন process.env। এটি কেবল একটি উদাহরণ তবে এটি দেখতে এরকম হতে পারে:const dev = process.env.development === true

— lfender6445

Answer 5

ওয়েবপ্যাক 2 এ আমি সমস্ত 12 ডিভটোল অপশন চেষ্টা করেছি। নিম্নলিখিত বিকল্পগুলি কনসোলে মূল ফাইলটির সাথে লিঙ্ক করে এবং লাইন নম্বর সংরক্ষণ করে। নীচে নোট দেখুন পুনরায়: লাইন।

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

শুধুমাত্র লাইন

উত্স মানচিত্রগুলি প্রতি লাইনে একক ম্যাপিংয়ে সরলীকৃত হয়। এর অর্থ সাধারণত প্রতি বিবৃতিতে একক ম্যাপিং হয় (আপনার লেখককে এইভাবে মনে করে)। এটি আপনাকে বিবৃতি স্তরে ডিবাগিং এক্সিকিউশন থেকে এবং একটি লাইনের কলামে সেটিংস ব্রেকপয়েন্টগুলি থেকে বাধা দেয়। মিনিমাইজিংয়ের সাথে একত্রিত হওয়া সম্ভব নয় কারণ মিনিমাইজাররা সাধারণত কেবল একটি লাইন নির্গত করে।

এটি পর্যালোচনা

একটি বৃহত প্রকল্পে আমি খুঁজে পেলাম ... ইভাল-উত্স-মানচিত্রের পুনর্নির্মাণ সময়টি হয় 3.5 ডলার ... ইনলাইন উত্স-মানচিত্র পুনর্নির্মাণের সময়টি is 7s

Answer 6

এমনকি আমি একই সমস্যার মুখোমুখি হয়েছি, ব্রাউজারে এটি সংকলিত কোড দেখাচ্ছে। আমি ওয়েবপ্যাক কনফিগারেশনের ফাইলটিতে নীচে পরিবর্তন করেছি এবং এটি এখন ভাল কাজ করছে।

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

এবং লোডারগুলিতে আমি ব্যাবিল-লোডারটিকে প্রথম বিকল্প হিসাবে রেখেছি

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' }
]

Comments

debugসম্পত্তি webpack 2. সরানো হয়েছে

— jnns

+1 টি। যোগ করা হচ্ছে includeবিকল্প কি এটা আমার জন্য সংশোধন করা হয়েছে। : Webpack 2 এটা ভালো দেখায়rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]

— ম্যাট ব্রাউনি