01. 웹팩3(Webpack3) 환경셋팅

2018.03.03 in Frontend

번들러의 종결자 웹팩을 셋팅해보자!

여러 파일을 하나로 합쳐서, request를 최소화 시켜주고,

소스 파일의 변경 watch

babel, lint 와 같은 여러 플러그인과의 통합도 도와준다!

mkdir webpack-practice
cd webpack-practice
mkdir config dist src
npm init -y
npm i -g webpack@^3.8.1

src/main.js

웹팩을 적용할 main.js를 생성하자.

config 폴더에 webpack.dev.js를 생성

const path = require("path")

module.exports = {
  entry: {
      main: ["./src/main.js"]
  },
  output: {
    filename: "[name]-bundle.js",
    path: path.resolve(__dirname, "../dist")
  }
}

webpack –config=config/webpack.dev.js

그럼 dist에 main-bundle.js가 생성된다.

dist/index.html

해당 번들 js를 실행하는 html을 생성해준다.

<html>
    <h1>hello World!</h1>
    <script src="main-bundle.js"></script>
</html>

hot reload 적용

webpack-dev-server를 깔아서 리로딩을 적용시켜보자

npm i -g webpack-dev-server@^2.7.1

webpack.dev.js

const path = require("path")

module.exports = {
  entry: {
      main: ["./src/main.js"]
  },
  output: {
    filename: "[name]-bundle.js",
    path: path.resolve(__dirname, "../dist")
  },
  devServer: {
    contentBase: "./dist",
    overlay: true // 오류내용을 화면에 보여주게 함.
  }
}

webpack –config=config/webpack.dev.js

main.js

CSS와 HTML 번들링

src/main.js

1 2	require("./main.css"); require("./index.html")

src/main.css

body {
    margin: 0;
    background-color: #444;
}

h1 {
    height: 100vh;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    text-shadow: 0 0 20px;
}

src/index.html

dist에 있던 html 도 src로 이동시킨다.

webpack-dev.js

const path = require("path")

module.exports = {
  entry: {
      main: ["./src/main.js"]
  },
  output: {
    filename: "[name]-bundle.js",
    path: path.resolve(__dirname, "../dist")
  },
  devServer: {
    contentBase: "./dist",
    overlay: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.html$/,
        use: [
          { 
            loader: "file-loader",
            options: {
              name: "[name].html"
            }
          },
          { loader: "extract-loader" },
          { loader: "html-loader" }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/, // 내친김에 이미지 까지 불러오자
        use: [
          {
            loader: "file-loader",
            options: {
              name: "images/[name].[ext]"
                // "images/[name]-[hash:8].[ext] 를 하면 이미지 이름에 해쉬를 적용할 수 있음!
            }
          }
        ]
      }
    ]
  }
}

src/images/이미지 하나를 복사하자

wget https://skout90.github.io/assets/images/favicon.png

src/index.html

<html>
    <body>
        <div class="profile">
            <img src="./images/favicon.png" alt="">
            <h1>hello World!</h1>
        </div>
        <script src="main-bundle.js"></script>
    </body>
</html>

webpack-dev-server –config=config/webpack.dev.js

cf) 매번 위 명령어를 입력하지 말고 package.json에 아래 명령어를 추가하고

npm run dev 또는 yarn dev로 짧게 명령어를 단축할 수 있다!

“scripts”: {

“dev”: “webpack-dev-server –config=config/webpack.dev.js”,

},

결과!

굳이 html에 css를 삽입할 필요 없이, 웹팩이 CSS를 읽어 html 파일에 삽입해준다!

Reference

https://www.udemy.com/webpack-beyond-the-basics

Comment and share

01. 웹팩3(Webpack3) 환경셋팅

hot reload 적용

CSS와 HTML 번들링

Reference

Junho Nam