여러개의 자바스크립트 파일을 하나의 파일로 컴파일 하기 위해 사용한다.
html에서 메인이 될 하나의 자바스크립트 파일만 불러오면 자바스크립트 파일끼리는 import export구문을 이용하여 연동해 사용할 수 있다.

webpack 사용하기

먼저 node가 설치되어야 한다.

npm i webpack webpack-cli

그리고 webpack.config.js 파일을 하나 만든다. 그 안에

const path = require('path');

module.exports = {
  // webpack 적용
  mode: 'development',
  entry: {
    main: './Index.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist'),
  }}
  
 entry에 들어갈 main: 다른 모듈들의 메인이 되는 js파일이다.
 output: 번들을 만들어낼 폴더 및 번들파일 이름을 설정할 수 있다.
 
 >   < script src="/dist/main.js" >< /script >
 
 html에서는 output에서 만들어 낼 bundle파일 하나만 불러와 사용하면 된다.
 

loader

하지만 여기서 문제점은 js파일들만 번들로 만들기 때문에 css파일이나 svg 등의 파일들은 import 구문으로 사용할 수가 없다. 이러한 기능들을 구현하기 위해서 로더가 필요하다.

const path = require('path');

module.exports = {
  // webpack 적용
  mode: 'development',
  entry: {
    main: './Index.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist'),
  },
module: {
    rules: [
      {
        test: /\.png$ /,
        use: {
          loader: 'url-loader', 
          options: {
            publicPath: './dist/', 
            name: '[name].[ext]?[hash]', 
            limit: 5000,
          },        },      },
          {
        test: [/\.jpg$/, /\.png$/],
        loader: 'file-loader',
        options: {
          publicPath: './dist/',
          name: '[name].[ext]?[hash]',
        },      },      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },    ],  },};

 

plugin

DefinePlugin

번들처리된 모든 자바스크립트 파일에서 사용할 수 있는 전역변수를 설정할 수 있다.

webpack.config.js 파일에서

const webpack = require('webpack')


module.exports = {
plugins: [new webpack.DefinePlugin({
	VERSION: JSON.stringify('v.1.3')
})
}
        
번들처리된 자바스크립트 모든 파일에서 console.log(VERSION) // v.1.3 출력

MiniCssExtractPlugin

css파일을 자바스크립트 파일 번들로 종속시키지 않고 따로 분리하여 html link로 불러오는 방식이다.

npm i mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.rules에서 style-loader 대신 MiniCssExtractPlugin.loader를 사용한다.

module.exports = {
	module: {
    	rules: [
        {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader,'css-loader'],
      },
        ]
    },
  plugins: [  new MiniCssExtractPlugin({filename: `app.css` })
]
}