티스토리 뷰


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 폴더가 있다고 생각

<!DOCTYPE html>
<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'
})],

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
TAG
more
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함