JavaScript 모듈 시스템과 webpack
Javascript 모듈화 명세를 만드는 대표적인 작업 그룹
CommonJS, AMD가 있고, webpack은 두 그룹의 명세를 모두 지원하는 Javascript 모듈화 도구
https://d2.naver.com/helloworld/0239818
원래는 공홈에서 뒤질라고 했는데 ㅎㅎ 그냥 네이버 D2나 유명블로그 보면서 이해하고
필요한 부분만 공홈에서 뒤져야겠습니다.
https://webpack.js.org/concepts/#output
Core Concepts
- Entry
- Output
- Loaders
- Plugins
- Mode
- Browser Compatibilility
Entry
웹팩이 내부의 의존성 그래프를 빌딩하는 것을 시작하기 위한 Entry point를 가리킵니다.
웹팩이 파악합니다.
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
}Object Syntax
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
};이 문법은 더 내용이 많지만, 애플리케이션에 의존성 그래프를 빌딩하는 시작점에 대해 확장성을 갖게 됩니다.
만약 당신이 SPA(Single Page App)가 아니라 다중 페이지 어플리케이션을 개발한다면, entry-object를 사용하여 한번에 다중 bundle을 만들어서 사용 할 수 있다.
Multi Page Application
webpack.config.js
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};뭐한거죠?
웹팩한테 3개의 분리된 의존성 그래프를 원한다고 웹팩한테 알려줍니다.
왜요?
여러 페이지를 갖고 있는 애플리케이션에서는, 서버가 새로운 HTML 문서를 끌어올겁니다. 페이지는 새로운 HTML 문서로 다시 로드되고, 자원들도 다시 다운로드 받아질겁니다.
optimization.splitChunks를 사용함으로써 각각의 페이지에서 사용하는 공유된 코드들을 번들링 할 수 있게 됩니다. 여러 페이지를 제공하는 애플리케이션은 엔트리 포인트가 증가함에 따라 이 기능을 통해 많은 코드와 모듈을 재사용할 수 있습니다.
Output
웹팩에게 어떤 이름으로 번들링한것을 어떤 경로로 뱉어낼 거냐에 대한 명시를 해줄 수 있습니다.
webpack.config.js
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};Multiple Entry Points
만약 여러분의 설정이 하나 이상의 chunk를 만든다면 ( 여러 entry points 를 쓰거나 commonChunkPlugin를 쓸때) 각각의 고유한 이름을 갖는 대체파일을 사용해야합니다.
대체파일?
보통은 이렇게 output를 정하잖아요.
module.exports = {
//...
output: {
filename: 'bundle.js'
}
};여러 번들 js를 만들때에는 다음 처럼 써야합니다.
module.exports = {
//...
output: {
filename: '[name].bundle.js'
}
};또는 청크 id를 쓰던가요.
https://webpack.js.org/configuration/output/#outputfilename
Loaders
웹팩은 자바스크립트, JSON 파일만 이해합니다. Loaders는 웹팩이 다른 종류의 파일들을 실행하게 해주고, 애플리케이션에서 사용하고, 의존성 그래프에도 추가하는 모듈로 변환합니다.
import App.css 는 웹팩의 특징입니다. 다른 태스크 러너에서는 지원하지 않을 수 있습니다.
Loader에는 크게 두가지 속성이 있습니다.
1. test : 변환될 파일을 인식하기 위한 것
2. use : 어떤 loader를 통해 파일을 변환하는데 사용할 것인가?
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};위에 내용은 이렇습니다. 웹팩 컴파일러에게 require() 혹은 import안에 .txt 파일을 해석하려고 할때, raw-loader로 변환해서 번들링하라라는 의미입니다.
정규식을 사용할때 quote. \", \' 를 사용하지 하지 않아요.
Plugins
loader가 어떤 모듈을 변환할때 사용된다면, 번들링 최적화, 자원관리, 환경변수 삽입 같은 plugins는 더 넓은 범위의 태스크를 수행합니다.
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};html-webpack-plugin
html-webpack-plugin 번들된 모듈을 자동으로 삽입해서 는 html file를 생성해줍니다. body에 script 태그를 이용해서요.
CommonsChunkPlugin
여러 모듈에서 공통으로 사용되는 모듈을 나눠서 만드는 플러그인입니다.
그럼으로써 다중진입과 출력파일 분할을 하고싶은 사람에게는 이걸 사용하면 됩니다.
Mode
Mode를 development, production, none 중 하나로 설정함으로써 webpack 내장 최적화를 사용할 수 있습니다.
module.exports = {
mode: 'production'
};Browser Compatilility
웹팩은 ES5를 따르는 모든 브라우저를 지원합니다. 이전 브라우저를 지원하고싶으면 polyfill해야합니다.
