webpack

웹팩은 하나의 시작점(Entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 파일로 만든다. 이 결과물을 Output이라고 한다.

시작하기

npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react rimraf

webpack: 웹팩을 실행하기 위한 필수 설치
webpack-cli: 터미널 환경에서 명령어를 실행시켜주기 위해 설치 ex)npm run dev
webpack-dev-sever: 코딩중 교체한 내용을 바로바로 새로고침 해주기 위해 설치
html-webpack-plugin: Webpack(웹팩)에서 HTML을 다루기 위한 플러그인입니다.
babel-loader: Webpack(웹팩)에서 babel(바벨)을 다루기 위한 라이브러리입니다.
@babel/core: babel(바벨)로 컴파일할 예정입니다.
@babel/preset-env: babel(바벨)로 컴파일시 어떤 타겟으로 지정할지 설정하는 라이브러리입니다.
@babel/preset-react: React(리액트)를 babel(바벨)로 컴파일하기 위한 라이브러리입니다.
rimraf: Mac과 윈도우즈에서 동일한 명령어로 폴더를 삭제하기 위한 라이브러리입니다.

package.json

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

"dev":"webpack-dev-sever --mode development": npm run dev 시에 라이브 서버 실행
"build":"webpack --mode production" : npm run build 시에 모든 자료를 번들로(하나로) 만들어줌

webpack.config.js

const path = require('path');

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

module.exports = {
  entry: {
    'js/app': ['./src/App.jsx'],
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
};