Webpack 초기 셋팅하기

Webpack 초기 셋팅하기

2022. 11. 18. 21:02ㆍ프로그래밍/ETC

npm 프로젝트 시작

npm init -y

Webpack 관련 패키지 설치

webpack / webpack-cli / webpack-dev-server 설치

# webpack-cli 와 webpack-dev-server 의 메이저 버전을 일치시키기 위해 @next 키워드 사용

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

package.json 스크립트 작성

  "scripts": {
    "dev": "webpack-dev-server --mode development" // --mode development : 개발 모드 명시
    "build": "webpack --mode production" // --mode production : 제품 모드 명시
  },

webpack.config.js 작성

// import
// node.js 전역 모듈
const path = require('path');

// export
module.exports = {
  // parcel main.js 와 비슷함
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',

  // 결과물(번들)을 반환하는 설정
  output: {
    path: path.resolve(__dirname, 'dist'), // 기본값, 생략 가능
    filename: 'main.js', // 기본값, 생략 가능
    clean: true, // 기존 내용 삭제
  },
};

dist 폴더 하위에 파일 생성되는 것 확인

npm run build

웹팩 플러그인 설치

npm i -D html-webpack-plugin

정적 파일 연결 플러그인 설치

npm i -D copy-webpack-plugin

css-loader / style-loader 설치

npm i -D css-loader style-loader

sass 설치

npm i -D sass-loader sass

postcss 관련 패키지 설치

postcss / autoprefilxer / postcss-loader 설치

npm i -D postcss autoprefixer postcss-loader

package.json 에 추가

"browserslist": [
  "> 1%",
  "last 2 versions"
]

루트 경로에 .postcssrc.js 파일 생성

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

babel 관련 패키지 설치

@babel/core / @babel/preset-env / @babel/plugin-transform-runtime

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

루트 경로에 .babelrc.js 파일 생성

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

babel-loader 설치

npm i -D babel-loader

webpack.config.js 작성

// import
const path = require('path'); // node.js 전역 모듈
const HtmlPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js', // parcel main.js 와 비슷함

  // 결과물(번들)을 반환하는 설정
  output: {
    path: path.resolve(__dirname, 'dist'), // 기본값, 생략 가능
    filename: 'main.js', // 기본값, 생략 가능
    clean: true, // 기존 내용 삭제
  },

  module: {
    rules: [
      {
        test: /\.s?css$/, // css/scss 확장자로 끝나는 파일
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], // 해당 패키지에서 사용할 것 (순서가 중요함)
        // 1. sass-loader : scss 를 해석
        // 2. postcss-loader : 해석된 내용에 플러그인 적용 (autoprefixer)
        // 3. css-loader : 적용된 내용을 읽어들임
        // 4. style-loader : index.html 에 스타일 태그로 삽입해줌
      },
      {
        test: /\.js$/, // js 확장자로 끝나는 파일
        use: ['babel-loader'], // 파일을 babel-loader 로 읽어들여서 babel 이 적용될 수 있게 만들어줌
      },
    ],
  },

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

  devServer: {
    host: 'localhost',
  },
};