Webpack을 배워서 남주자 - gae-jang-mo/app GitHub Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
function welcome(){
return 'Hello world'
}
alert(welcome());
</script>
</body>
</html>
↑ index.html
만약, welcome()이라는 메서드를 다른 페이지에서도 사용하게 된다면 같은 코드를 중복해서 정의해 주어야 함!
이런 문제는 모듈화를 통해 해결할 수 있다~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
alert(welcome());
</script>
<script src="./greeting.js"></script>
</body>
</html>
↑ index.html
function welcome() {
return 'Hello world'
}
↑ greeting.js
- 코드가 방대해지면 유지 및 보수가 쉽도록 모듈로 나누어 관리해야 함
- javascript는 지원하는 모듈 시스템이 없음
⇒ 이런 한계를 극복하기 위해 사용하는 도구 중 하나가 Webpack!
- JS 어플리케이션을 위한 정적 모듈 번들러
- 여러 의존 관계에 있는 모듈들을 하나의 js 파일로 번들링하는 역할을 수행
모듈 번들러: 여러 개의 파일들을 하나의 파일로 만들어 줌
Webpack은 컴파일 과정을 통해 의존관계에 있는 모듈을 엮어서 하나의 번들 파일로 반환
- 의존 모듈이 하나의 파일로 번들링되기 때문에 별도의 모듈 로더가 필요 없음
- html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움을 줄일 수 있음
- 모듈 시스템 관리
- 로더 사용
- 빠른 컴파일
내부적인 의존성 그래프의 빌드를 시작하기 위해 webpack이 어디를 가리켜야 하는지 설정
module.exports = {
entry: './path/to/my/entry/file.js'
};
Webpack이 만들어낸 번들을 저장할 위치, 이름을 설정
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'
}
};
Webpack이 이해할 수 있는 건 자바스크립트, Json 파일 뿐이라 다른 타입의 파일을 처리하고 어플리케이션이 사용할 수 있는 형태로 변환하고 의존성 그래프에 추가하는 역할
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
로더 종류 → https://github.com/webpack/webpack#loaders
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'})
]
};
development, production, none으로 설정함으로써 webpack을 각 환경에 맞게 일치시킬 수 있음
-
development: 개발용
-
production: 배포용. 배포용일 경우에는 알아서 최적화가 적용됨
module.exports = { mode: 'production' };
Webpack은 ES5-compliant한 모든 브라우저에서 사용할 수 있음. Promise가 꼭 필요함!
Webpack은 기본적으로 Node.js가 설치된 환경에서 사용할 수 있다
-
webpack,webpack-cli모듈 설치npm install --save-dev webpack webpack-cli -
config 설정
파일 이름은
webpack.config.js로 해야 됨. (파일명 변경 가능)const webpack = require('webpack'); module.exports = { mode: 'development', entry: { app: '...', // 결과물이 app.js로 나옴 }, output: { path: '...', filename: '...', // 옵션으로는 [name].js, [hash].js, [chunkhash].js가 있음 publicPath: '...', }, module: {}, // 여기에 babel 설정 plugins: [], optimization: {}, // resolve: 웹팩이 알아서 경로나 확장자를 처리할 수 있게 도와주는 옵션 resolve: { modules: ['node_modules'], extensions: ['.js', '.json', '.jsx', '.css'], }, }; -
html 파일에 번들링된 js 파일 적용하기
-
배포용으로 컴파일하기
# 컴파일 돼서 output으로 설정한 경로에 컴파일된 파일이 생성됨 npm webpack