webpack 보일러플레이트 만들기

github: https://github.com/Jeonsol/webpack-boilerplate

 

yarn init -y

yarn add babel-core babel-loader babel-preset-env babel-preset-stage-1 html-webpack-plugin webpack webpack-dev-server webpack-cli -d -s

설치된 라이브러리

• babel-core: Babel 핵심 의존성 라이브러리이다. Babel(바벨)은 자바스크립트 ES6를 ES5로 컴파일하여 현재 브라우저가 이해할 수 있도록 변환하는 도구다.
• babel-loader: babel과 webpack을 사용해 자바스크립트 파일을 컴파일한다.
• babel-preset-env: ES2015, ES2016, ES2017 버전을 지정하지 않아도 바벨이 자동으로 탐지해 컴파일한다.
• babel-preset-stage-1: TC39에서 검토 중인 Stage 1 스펙을 사용한다. (stage-0부터 3까지는 EcmaScript 스펙 중에서 비공식 실험적인 기술들을 사용할 수 있게 해주는 프리셋으로 Stage 2와 Stage 3도 사용 가능하다.)
• html-webpack-plugin: 애플리케이션을위한 HTML 파일을 생성하거나 템플릿을 제공한다.
• webpack: 모듈 번들러(Module bundler)
• webpack-cli: Webpack 4.0.1 이상에서 필요한 커맨드라인 인터페이스다.
• webpack-dev-server: 애플리케이션 개발 서버를 제공한다.

바벨 설정

touch .babelrc

.babelrc

{
  "presets": ["env", "stage-1"]
}

webpack 설정

webpack.config.development.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const port = process.env.PORT || 3000;

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash].js',
    publicPath: '/'
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_module/,
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      favicon: 'public/favicon.ico'
    })
  ],
  devServer: {
    host: 'localhost',
    port: port,
    historyApiFallback: true,
    open: true
  }
}

• port: 환경변수 port가 없으면 기본 포트를 제공하고 모듈을 내보낸다.
• entry: 애플리케이션의 진입점이다. 웹펙4에서는 웹팩3과 반대로 entry를 생략할 수 있다. entry가 없으면 웹팩은 시작점이 ./src 디렉토리 아래에 있다고 가정한다. 그러나 이 튜토리얼에서는 entry를 설정해 시작점을 분명하게 표시하기로 한다.
• output: 컴파일된 파일을 저장할 경로를 알려준다.
• filename: 번들된 파일 이름을 말한다. [hash]는 애플리케이션이 수정되어 다시 컴파일 될 때마다 웹팩에서 생성된 해시로 변경해주어 캐싱에 도움이 된다.
• devtool: 소스맵을 생성해 애플리케이션 디버깅을 도와준다. 소스 맵에는 여러가지 유형이 있으며 그 중 inline-source-map은 개발시에만 사용된다. 
• module: 애플리케이션 내 포함되는 모듈을 정의한다. 
• rules: 각 모듈을 처리하는 방법을 설정한다.
  • node_modules 디렉터리를 제외한 자바스크립트 파일을 찾은 다음 babel-loader를 통해 바벨을 사용해 바닐라 자바스크립트로 변환한다. 바벨은 .babelrc파일에서 설정 내용을 읽는다.
• html-webpack-plugin: HTML 템플릿과 favicon을 지정한다.

webpack.config.production.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const port = process.env.PORT || 3000;

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'static/[name].[hash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_module/,
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      favicon: 'public/favicon.ico'
    })
  ]
}

• filename: static 디텍터리 안에 자바스크립트 번들을 생성한다.
• path: 출력 디렉터리는 dist이다. __dirname은 현재 디렉터리의 절대 경로를 제공하는 Node 변수이다. path.resolve로 디렉토리를 합친다. 웹팩4는 출력 경로를 ./dist로 가정하기 때문에 이 부분을 그대로 둘 수 있다.

package.json

"scripts": {
  "dev":"webpack-dev-server --config webpack.config.development.js",
  "prebuild": "rimraf dist",
  "build": "cross-env NODE_ENV=production webpack -p --config webpack.config.production.js"
}

• prebuild: rimraf 라이브러리를 사용해 build 스크립트 전에 실행하여 마지막 프로덕션 빌드로 생성된 dist 디렉토리를 삭제한다.
• build: 먼저 윈도우환경에서 cross-env라이브러리를 사용하고 NODE_ENV으로 환경변수를 설정한다. 그 다음 웹팩을 -p 플래그로 호출해 프로덕션을 위해 빌드 최적화를 지시하고 마지막으로 프로덕션 구성을 지정한다.

yarn add rimraf cross-env -D

프로젝트 구조

|-- node_modules
|-- public
    |-- index.html
    |-- favicon.ico
|-- src
    |-- index.js
|-- .babelrc
|-- package.json
|-- postcss.config.js
|-- webpack.config.development.js
|-- webpack.config.production.js
|-- yarn.lock

 

 

참고한 문서는 리액트 개발환경 설정하는 문서였는데, 이 문서를 참고하여 바닐라스크립트용 웹펙 설정을 만들어 보았다. css 최적화, 코드분할, webpack merge등이 반영되어 있지 않은 기본적인 설정이므로 이와 같은 설정을 추가하려면 아래 문서를 참고하면 된다.

 

참고: https://sujinlee.me/webpack-react-tutorial/