Front end/webpack

Webpack - Webpack 0부터 CRA 까지 (스터디 내용정리)

Ideveloper2 2018. 8. 8. 20:32


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