티스토리 뷰
Webpack
:Webpack 0부터 CRA 까지
| 웹팩 사용전
- 번들러 (browserify)
- reload (browser sync)
- transform (babel, babelify(browserify 와 연결))
| 웹팩 사용후
- 번들러 (webpack)
- reload (webpack dev server)
- transform (babel-loader)
웹팩이 cache를 사용해 속도를 향상 시킴.
hot module: 바뀐 위치에 다른 모듈을 끼어넣음
module: 모든것이 모듈이다. browserify (오직 js 빌드) 웹팩(모든 파일을 빌드)
| 바벨6->바벨7
- babel-preset-env -> @babel/preset-env
- .babelrc-> babel.config.js
| 웹팩3->웹팩4
- webpack-dev-server -> webpack-serve
- webpack-cli ->webpack command
| 웹팩 기능
- import 구문, uglify, 번들링
- --mode development를 하면 uglify안함, --mode producion을 하면 uglify함
browserify -> js만 쓰니까 target을 잡을 필요가 없음 (babelify가 모든 파일을 돌음)
webpack -> babel-loader을 쓸때 target 설정
| babel 넣기
- webpack.config.js 안에 넣기
- babelrc 안에 넣기
- babel.config.js안에 넣기
- package.json안에 넣기
mode에 따라 성능이 다름
console.log(process.env.NODE_ENV)
module.exports = {
entry: "./src/index.js",
mode: process.env.NODE_ENV == 'development' ? 'development': 'production',
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader"
}
}
]
}
};
| webpack dev server
- webpack-dev-server 가 자동으로 상위에 main.js가 있다 생각하고 불러옴
- 가상의 dist 폴더가 있다고 생각
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>
devServer:{
contentBase: path.join(__dirname,'public'),
publicPath: "/blog/"
}- devserver 옵션에서 contentBase로 서버 시작 초기 진입점을 설정
- publicPath로 초기 라우트 설정
웹팩은 진입점이 무조건 js
| HtmlWebpackPlugin 사용
- 번들링한 js inject
const HtmlWebpackPlugin=require('html-webpack-plugin')
plugins:[ new HtmlWebpackPlugin({
template: 'public/index.html'
})],'Front end > webpack' 카테고리의 다른 글
| Webpack - 웹팩 4 뽀개기 (개발하기 sourcemap, 개발서버 setting(webpack dev server) (0) | 2018.07.19 |
|---|---|
| Webpack - 웹팩 4 뽀개기 (기본 개념 Entry, Output, Loaders, Plugins) (0) | 2018.07.18 |
| Webpack- 웹팩 경로 설정시 src라는 이름으로 alias만들기 (0) | 2018.06.27 |
| Webpack - 웹팩 환경 세팅하기 (0) | 2018.04.15 |
| Webpack- 웹팩(Webpack) (1) | 2018.03.31 |
댓글