webpack template 만들기

1. 초기 설정

terminal

npm init -y

npm i -D webpack webpack-cli webpack-dev-server@next

용어설명

• webpack-cli: command line interface를 지원해주는 패키지. 해당 패키지로 webpack 명령을 사용할 수 있게 됨.
• webpack-dev-server: 코드 수정을 즉각적으로 확인 할 수 있는 개발 서버를 열어주는 패키지

package.json

 "scripts": {
   "dev": "webpack-dev-server --mode development",
   "build": "webpack --mode production"
 },

2. 플러그인 설치

terminal

npm i -D html-webpack-plugin copy-webpack-plugin

용어설명

• html-webpack-plugin: webpack 번들을 제공하는 HTML 파일 생성을 단순화한다.
• 'copy-webpack-plugin': 지정한 폴더 안의 내용을 build된 폴더 안으로 들어 갈 수 있게 설정하는 플러그인.

3. module

terminal

npm i -D css-loader style-loader

용어설명

css-loader: js에서 css를 해석하는데 도움을 줌.
style-loader: 해석된 css파일을 html파일에 삽입시키는 역할.

main.js

import '../css/style.css

3. autoprefixer

terminal

npm i -D postcss autoprefixer postcss-loader

용어설명

• postcss: 스타일의 후처리를 도와준다.
• autoprefixer: 공급업체 접두사를 자동으로 붙여준다.
• postcss-loader: webpack에서 postcss를 동작시킨다.

package.json

  // 현재 프로젝트가 어떤 브라우저를 지원하는 지 명시
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

.postcssrc.js

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
};

4. babel

terminal

npm i -D @babel/core @bable/preset-env @bable/plugin-transform-runtime babel-loader

용어설명

• @babel/core: babel을 사용하기 위한 필수 패키지
• @babel/preset-env: js 기능들을 별다른 명시없이 자동으로 사용할 수 있게 하는 기능.
• @babel/plugin-transform-runtime: 비동기처리를 위한 플러그인
• babel-loader: webpack에서 babel 기능을 사용할 수 있게 한다.

.babelrc.js

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: [
      ['@babel/plugin-transform-runtime']
    ]
};

5. webpack.config.js

// import
const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',
  
  // 결과물(번들)을 반환하는 설정
  output: {
  	// path에 어떠한 결과물을 어디에 내어줄 것인지 설정.
  	// path는 절대 경로를 필요로 함.
    // resolve는 첫 번째 인수와 두 번째 인수를 합쳐 준다.
    // __dirname은 현재 파일이 있는 경로를 지칭
    path: path.resolve(__dirname, 'dist'),
    // 어떤 파일 명으로 내보낼 것인지 설정
    filename: 'main.js',
    // 기존에 내보낸 파일을 제거.
    clean: true,
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        // 순서가 중요. 맨밑에서 부터 읽힘.
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ]
      },
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정.
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    })
  ],
  
  // 서버 주소 설정
  devServer: {
    host: 'localhost'
  },
};