Razzle: ํ”„๋กœ๋•์…˜์—์„œ SourceMaps ๋น„ํ™œ์„ฑํ™”

์— ๋งŒ๋“  2019๋…„ 04์›” 24์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: jaredpalmer/razzle

ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ๋ฅผ ์œ„ํ•ด SourceMap ์ƒ์„ฑ์„ ๋น„ํ™œ์„ฑํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

CRA์—๋Š” GENERATE_SOURCEMAP์ด๋ผ๋Š” .env ๋ณ€์ˆ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฌธ์„œ์—์„œ ์•„๋ฌด๊ฒƒ๋„ ๋ณผ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ฐ€๋Šฅํ•œ ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์€ razzle.config.js ๋‚ด์—์„œ webpack ๊ตฌ์„ฑ์„ ํ™•์žฅํ•˜๋Š” ๊ฒƒ๋ฟ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@crazyjakee
์ด๊ฒƒ์€ .js ํŒŒ์ผ์— ๋Œ€ํ•œ ์†Œ์Šค ๋งต๋งŒ ๋น„ํ™œ์„ฑํ™”ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
.css ํŒŒ์ผ์€ ์—ฌ์ „ํžˆ โ€‹โ€‹์†Œ์Šค ๋งต ํŒŒ์ผ์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  5 ๋Œ“๊ธ€

razzle.config.js ๋‚ด์—์„œ ์›นํŒฉ ๊ตฌ์„ฑ ํ™•์žฅ

์ด๊ฒƒ์ด ํ•ด๊ฒฐ์ฑ…์ž…๋‹ˆ๋‹ค. razzle.config.js์˜ ์˜ˆ.

module.exports = {
  modify: (config, { target, dev }) => {
    config.devtool = dev ? 'source-map' : false;
    return config;
  },
};

@krazyjakee ์˜ˆ, ์ œ๊ฐ€ ๋งํ•œ ๋‚ด์šฉ๊ณผ ํ˜„์žฌ ์ฝ”๋“œ์— ๋™์ผํ•œ ๋‚ด์šฉ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๋Ÿฌํ•œ ๋ชฉํ‘œ๋ฅผ ๋‹ฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์ด๊ฒƒ์€ ๋‹ค์†Œ ๋ณต์žกํ•ฉ๋‹ˆ๋‹ค. ์†”์งํžˆ ๋„ˆ๋ฌด ์ •ํ™•ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
CRA ๋ฐฉ์‹์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๊ฒƒ์ด ๊ฐ€๋Šฅํ•œ ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์ด๋ผ๋ฉด ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.

@ Ronny25 ํ™˜๊ฒฝ ๋ณ€์ˆ˜๋ฅผ ์ •๋ง๋กœ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

module.exports = {
  modify: config => {
    config.devtool = process.env.GENERATE_SOURCEMAP ? 'source-map' : false;
    return config;
  },
};

๊ทธ๋Ÿฌ๋ฉด CRA์™€ ๋™์ผํ•œ ์ •ํ™•๋„๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@krazyjakee ์™„์ „ํžˆ ์‚ฌ์‹ค์ด ์•„๋‹™๋‹ˆ๋‹ค ๐Ÿ˜„
๋จผ์ €, ๋‚ด๋ถ€์— ์–ด๋–ค ๋กœ์ง์ด ์žˆ๋Š” ์„ค์ • ํŒŒ์ผ์„ ์ƒ์„ฑํ•ด์•ผ ํ•˜๊ณ , ๊ทธ ๋‹ค์Œ์—๋Š” env ๋ณ€์ˆ˜๊ฐ€ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด์ƒํ•˜๊ฒŒ ๋“ค๋ฆฝ๋‹ˆ๋‹ค ๐Ÿ˜‰
ํ•˜์ง€๋งŒ ๋‚˜๋Š” ์‚ด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ˜

@crazyjakee
์ด๊ฒƒ์€ .js ํŒŒ์ผ์— ๋Œ€ํ•œ ์†Œ์Šค ๋งต๋งŒ ๋น„ํ™œ์„ฑํ™”ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
.css ํŒŒ์ผ์€ ์—ฌ์ „ํžˆ โ€‹โ€‹์†Œ์Šค ๋งต ํŒŒ์ผ์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰