2021. 9. 8. 00:30ใ๐ TIL
- ํ์ฌ ํ๋ก์ ํธ ๊ฐ๋ฐํ๊ฒฝ ์ธํ ํ๋ผ๋ ๋ง์ ํธ๋ค๋ฅ ์ธํ๋ฐ์์ ์นํฉ ๊ฐ์๋ฅผ ๊ตฌ๋งคํ๋ค.
- ๊ทธ์ ๊น์ง๋ ๊ฐ๋ฐํ๊ฒฝ, webpack ๊ฐ์ ๋ง์ด ๋ฏ์ค๊ณ ๋๋์ ๊ฑฐ๋ฆฌ๊ฐ ๋จผ ๊ฐ๋ ์ด๋ผ ์๊ฐํ๋๋ฐ, ๊ณต๋ถํ๋ฉด ํ ์๋ก ๋ ๋ฐฐ์์ผ ํ๋ค๊ณ ๋๊ผ๋ค.
๋ก๋์ ํ๋ฌ๊ทธ์ธ์ ์ฐจ์ด
- ๋ก๋๊ฐ ํ์ผ ๋จ์๋ก ์ฒ๋ฆฌํ๋ ๋ฐ๋ฉด,
- ํ๋ฌ๊ทธ์ธ์ ๋ฒ๋ค๋ ํ๋์ ๊ฒฐ๊ณผ๋ฌผ์ ๋์์ผ๋ก ์ฒ๋ฆฌํ๋ค.
- ์์ ์์ ์์ฑ๋ ๊ฒฐ๊ณผ๋ฌผ์ด main.js ํ๋์ด๊ธฐ ๋๋ฌธ์ ํ๋ฌ๊ทธ์ธ์ด ํ ๋ฒ๋ง ๋์ํ ๊ฒ์ด๋ผ ์ถ์ธกํ ์ ์๋ค.
์์ฃผ ์ฌ์ฉํ๋ ํ๋ฌ๊ทธ์ธ
bannerPlugin
- main.js ์ ์ต์๋จ์ ์ถ๋ ฅ๋ ๋ด์ฉ์ ์์ฑํ ์ ์๋ค(like banner)
const childProcess = require('child_process'); // git ๋ช
๋ น์ด๋ฅผ ๋ฃ์ ์ ์๋ค.
plugins: [
new webpack.BannerPlugin({
// banner: "์ด๊ฒ์ ๋ฐฐ๋์
๋๋ค." // ์ด ๋ด์ฉ์ด main.js ์ ์ต์๋จ์ ์ถ๋ ฅ๋๋ค.
// git ๋ช
๋ น์ด๋ฅผ ๋ฃ์ ์ ์๋ฐ.(execSync())
banner: `
Build Date: ${new Date().toLocaleString()}
Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
Author : ${childProcess.execSync('git config user.name')}
`
}),
]
definePlugin
๊ฐ๋ฐํ๊ฒฝ๊ณผ ์ด์ํ๊ฒฝ์ ๋๋์ด ๊ฐ๋ฐํ ๋, ํ๊ฒฝ์ ๋ฐ๋ผ api ์ฃผ์๊ฐ ๋ค๋ฅผ ์ ์๋ค.
์ด๋ฐ ๊ฒฝ์ฐ์ ๋ฐฐํฌํ ๋๋ง๋ค ์ฝ๋๋ฅผ ์์ ํ๋ฉด ํด๋จผ์๋ฌ๊ฐ ๋ฐ์ํ ์ ์๋ค.
api ์ฃผ์์ฒ๋ผ ํ๊ฒฝ ์์กด์ ์ ๋ณด๋ ์์ค์ฝ๋๊ฐ ์๋ ๋ค๋ฅธ ๊ณณ์์ ๊ด๋ฆฌํ๋ ๊ฒ์ด ์ข๋ค.
๋น๋ ํ์์ ๊ฒฐ์ ๋๋ ํ๊ฒฝ๋ณ์๋ฅผ ์ดํ๋ฆฌ์ผ์ด์ ๋จ์ ์ฃผ์ ํ๊ธฐ ์ํด ์ฌ์ฉํ๋ค.
๋น๋ ํ์์ ๊ฒฐ์ ๋ ๊ฐ์ ์ดํ๋ฆฌ์ด์ ์ ์ ๋ฌํ ๋๋ ์ด ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ์.
plugins:[
...
new webpack.DefinePlugin({
// TWO: '1+1' // number ์ถ๋ ฅ
TWO: JSON.stringify('1+1'), // ๋ฌธ์์ด ์ถ๋ ฅ
'api.domain': JSON.stringify('http://dev.api.domain.com') // ๊ฐ์ฒด์ฒ๋ผ ๋ง๋ค์ด ์ถ๋ ฅ๋ ๊ฐ๋ฅํ๋ค.
})
]
HtmlWebpackPlugin (third-party plugin)
- HTML ํ์ผ์ ํ์ฒ๋ฆฌํ๋๋ฐ ์ฌ์ฉํ๋ค. ๋น๋ ํ์์ ๊ฐ์ ๋ฃ๊ฑฐ๋ ์ฝ๋๋ฅผ ์์ถํ ์ ์๋ค.
- index.html ์ ํ์ดํ ๋ถ๋ถ์ ejs ๋ฌธ๋ฒ์ ์ด์ฉํ๋๋ฐ <%= env %> ๋ ์ ๋ฌ๋ฐ์ env ๋ณ์ ๊ฐ์ ์ถ๋ ฅํ๋ค.
plugins:[
...
new HtmlWebpackPlugin({
template: "./src/index.html",
templateParameters: {
env: process.env.NODE_ENV === "development" ? "(๊ฐ๋ฐ์ฉ)" : "(์ด์)"
},
// ๊ฐ๋ฐํ๊ฒฝ์์ ์๋ํ์ง ์๋๋ก ์ผํญ ์ฐ์ฐ ๊ฑธ์ด๋๋ค.
minify: process.env.NODE_ENV === "production" ? {
collapseWhitespace: true,
// ๊ณต๋ฐฑ ์ ๊ฑฐ => dist/index.html์ด ๊ณต๋ฐฑ ์ ๊ฑฐ๋๊ธฐ์ ํ์ค๋ก ์ ๋ฆฌ๋๋ฒ๋ฆฐ๋ค.
// => ์ด๋ฐ๊ฑด ์ด์์์๋ง ์ค์ ํด์ฃผ๋ฉด ์ข๋ค. (๊ฐ๋ฐ๊ธฐ์์ ํ์ค๋ก ๋ผ์์ผ๋ฉด ๋๋ฒ๊น
ํ๊ธฐ ์ด๋ ค์ฐ๋)
removeComments: true // ์ฃผ์ ์ ๊ฑฐ
} : false
})
]
CleanWebpackPlugin (third-party plugin)
- ๋น๋์ , ์ด์ ๊ฒฐ๊ณผ๋ฌผ(๋์ฒด๋ก dist ํด๋)์ ์ญ์ ํ๊ณ , ๋ค์ ๋น๋ ํด๋๋ฅผ ์์ฑํด์ค๋ค(๋น๋ ํด๋์ ๊ฐฑ์ )
plugins:[
...
new CleanWebpackPlugin(),
]
minicssExtractPlugin (third-party plugin)
๋ธ๋ผ์ฐ์ ์์ ํฐ ํ์ผ ํ๋๋ฅผ ๋ก๋ฉํ๋ ๊ฒ์ ๋ถ๋ด์ค๋ฝ๋ค.
์ฌ๋ฌ๊ฐ์ ์์ ํ์ผ์ ๋์์ ๋ค์ด๋ก๋ ํ๋ ๊ฒ์ด ๋ ๋น ๋ฅด๋ค(=> css ํ์ผ์ ์ฌ๋ฌ๊ฐ ๋ง๋ค์ด ์ญํ ์ ๋ฐ๋ผ ๋ถ๋ฆฌ)
javascript ์์ css ๋ฅผ ๋ฝ์๋ด๊ธฐ ๋๋ฌธ์, ๊ฐ๋ฐํ๊ฒฝ์์ ๊ตณ์ด ์ฌ์ฉํ ํ์์๋ ํ๋ฌ๊ทธ์ธ.
๊ฐ๋ฐํ๊ฒฝ์์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ ํ๋๋ก ๋น๋ํ๋ ๊ฒ์ด ๋ ๋น ๋ฅด๊ธฐ ๋๋ฌธ์ด๋ค.
์ ๋ฆฌํ์๋ฉด, ์คํ์ผ์ํธ๋ ๋น๋๊ณผ์ ์์ javascript ํ์ผ๋ก ์ปดํ์ผ๋๋๋ฐ,
์คํ์ผ์ํธ๊ฐ ๋ง์์ง๋ฉด ํ๋์ javascript ํ์ผ์ ํฌ๊ธฐ๊ฐ ๋น๋ํด์ง๋ค.์ด๋ฐ ์ํฉ์ ๋ฉดํ๊ณ ์, ๋ฒ๋ค ๊ฒฐ๊ณผ์์ ์คํ์ผ์ํธ ์ฝ๋๋ง ๋ฝ์ ๋ณ๋์ css ํ์ผ๋ก ๋ง๋ค์ด ์ญํ ์ ๋ฐ๋ผ ๋ถ๋ฆฌํ๋ ๊ฒ.
plugins:[
...(process.env.NODE_ENV === 'production'
? [new MiniCssExtractPlugin({filename: '[name].css'})]
: [])
]
์ ๋ฆฌ
์ํธ๋ฆฌํฌ์ธํธ๋ฅผ ์์์ผ๋ก ์ฐ๊ฒฐ๋์ด ์๋ ๋ชจ๋ ๋ชจ๋์ ํ๋๋ก ํฉ์ณ์ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋๋ ๊ฒ์ด ์นํฉ์ ์ญํ ์ด๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ๋ฟ๋ง ์๋๋ผ ์คํ์ผ์ํธ, ์ด๋ฏธ์ง ํ์ผ๊น์ง๋ ๋ชจ๋๋ก ์ ๊ณตํด ์ฃผ๊ธฐ ๋๋ฌธ์ ์ผ๊ด์ ์ผ๋ก ๊ฐ๋ฐํ ์ ์๋ค.
'๐ TIL' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
210909 ๊ฐ๋ฐ๊ธฐ๋ก: src์ dist ์ฐจ์ด (0) | 2021.09.09 |
---|---|
210908 ๊ฐ๋ฐ๊ธฐ๋ก: JSON ์ ์ค๋ฐ๊ฟ ๋ฌธ์ (0) | 2021.09.09 |
210906 ๊ฐ๋ฐ๊ธฐ๋ก: ํ๋ก์์ ๋? (0) | 2021.09.07 |
npm ์๋์ฐ - ๋งฅ ํธํ ๋ฐฉ๋ฒ (npm install cross-env) (0) | 2021.09.06 |
210905 ๊ฐ๋ฐ๊ธฐ๋ก: ํ๋ก๊ทธ๋๋จธ์ค ๋ฑ๊ตฃ๊ธธ ํ์ด์ฌ (0) | 2021.09.06 |