webpack 번들링 과정 직접 설계하기

[jerrybabah]

원하는 결과

프로젝트의 root directory 구조

/ROOT/
  - dist/
  - public/
  - src/
  - webpack.config.js
  - package.json

public/ 디렉토리 구조

/public/
  - image/
    - image1.png
  - index.html

src/ 디렉토리 구조

/src/
  - components/
  - css/
    - style.css
  - App.js
  - main.js

dist/ 디렉토리 구조

/dist/
  - css/
    - style.css
  - image/
    - image1.png
  - js/
    - main.js
  - index.html

webpack.config.js 설정 1단계

추가 loader, 모듈 등의 설치 없이 webpack 자체 기능으로만 구성

의존성 설치

$ npm install --save-dev webpack webpack-cli
or
$ yarn add --dev webpack webpack-cli

• webpack4부터 webpack 설치 시, webpack-cli도 함께 설치해줘야 한다.

webpack 설정 후 build

/**
* webpack.config.js
**/
const path = require('path');

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

위와 같이 설정하고 build를 시작하면

$ npx webpack --config webpack.config.js
or
$ yarn webpack --config webpack.config.js

다음과 같은 dist 구조가 구성된다.

/dist/
  - main.js

webpack.config.js 설정 2단계

js 폴더 따로 두기, index.html 추가

의존성 추가

$ npm install --save-dev html-webpack-plugin
or
$ yarn add --dev html-webpack-plugin

webpack 설정 추가

/**
* webpack.config.js
**/
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js', // js/ 경로 추가하는 것으로 js 폴더 따로 두기 완료
    publicPath: '/',
  },
  plugins: [
    // template을 바탕으로 번들된 js파일을 <script>태그로 삽입해준다.
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
}

다시 빌드해보면 다음과 같은 구조가 만들어진다.

/dist/
  - js/
    - main.js
  - index.html

webpack.config.js 설정 3단계

css loader 추가, css 폴더에 css 파일 따로 두기

의존성 추가

$ npm install --save-dev css-loader mini-css-extract-plugin
or
$ yarn add --dev css-loader mini-css-extract-plugin

webpack 설정 추가

/**
* webpack.config.js
**/
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js', // js/ 경로 추가하는 것으로 js 폴더 따로 두기 완료
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    // template을 바탕으로 번들된 js파일을 <script>태그로 삽입해준다.
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    // 번들링 과정에서 css-loader로 읽어들인 것들을 css파일로 따로 추출해준다.
    new MiniCssExtractPlugin({
      filename: 'css/style.css', // css 폴더 밑에 css 파일 두기
    }),
  ],
}

빌드 후 dist의 구조를 보면 다음과 같다.

/dist/
  - css/
    - style.css
  - js/
    - main.js
  - index.html

webpack.config.js 설정 4단계

public 폴더에 있는 파일들 dist에 복사하기

의존성 추가

$ npm install --save-dev copy-webpack-plugin
or
$ yarn add --dev copy-webpack-plugin

webpack 설정 추가

/**
* webpack.config.js
**/
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js', // js/ 경로 추가하는 것으로 js 폴더 따로 두기 완료
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    // template을 바탕으로 번들된 js파일을 <script>태그로 삽입해준다.
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    // 번들링 과정에서 css-loader로 읽어들인 것들을 css파일로 따로 추출해준다.
    new MiniCssExtractPlugin({
      filename: 'css/style.css', // css 폴더 밑에 css 파일 두기
    }),
    // from에 지정한 폴더 내에 있는 파일을 output.path 기준 상대경로로 지정한 to 경로에 복사
    new CopyPlugin({
      patterns: [
        { from: 'public', to: '' }
      ]
    }),
  ],
}

다시 빌드해보면 다음과 같다.

/dist/
  - css/
    - style.css
  - public/
    - image1.png
  - js/
    - main.js
  - index.html