WebPack?

• Package Bundler: 여러 모듈을 번들로 묶어 HTTP 호출을 줄임
• 스크립트가 많아지면서 효율적으로 관리하기위해 사용
• 많은 스크립트를 하나로 합침

WebPack 설정

1. npm init -> package name 설정 후 나머자 엔터
2. npm i vue -> vue 설치
3. npm i webpack webpack-cli -D -> webpack 설치 "-D" 옵션을 통해 개발할 때만 사용
4. 루트 디렉토리에 webpack.config.js파일 생성

module.exports = {
	entry:{				  
    	app: './main.js',
    },
    output: {
    	filename: "main.js",
    	path: path.resolve(__dirname, "./dist"),
  },
    module: {
    	rules: [{
        
        }],
    },
    plugins: [],
    output: {			
    	filename: 'app.js', 
        path: './dist',
    },
};

WebPack 구성

Mode
종류:production, developement, none

Entry
의존성 그래프의 시작파일을 설정
기본값:./src/index.js

Output
의존성을 가진 모듈로 생성한 bundle의 결과물 위치를 지정
기본값:./dist/main.js

Loader
로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성

Plugins
플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성

내가 만든 webpack

const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const webpack = require("webpack");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "./dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      { test: /\.vue$/, use: "vue-loader" },
      { test: /\.css$/, use: ["vue-style-loader", "css-loader"] },
      {
        test: /\.scss$/,
        use: ["vue-style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new VueLoaderPlugin(),
    new webpack.ProgressPlugin(),
    new MiniCssExtractPlugin({
      filename: "style.css",
    }),
  ],
  devServer: {
    open: true,
    hot: true,
    noInfo: true,
    overlay: true,
    historyApiFallback: true,
  },
  devtool: "#eval-source-map",
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
    extensions: ["*", ".js", ".vue", ".json"],
  },
};