'웹팩 파일경로'에 해당되는 글 1건

[webpack] 파일 경로 단축 별명으로 대체시키기(alias)

 - 이 글은 https://minaminaworld.tistory.com/120 이어지는 글입니다.

선행 :  app/common/customUtil.js 파일 만들기

문제 상황

import 할 대상들의 경로가 현재는 길이가 짧지만 중복되는 내용을 줄이는 방안

// example.js

import "../css/reset.css"; // 중복을 줄여보자
import "../css/base.css"; // 중복을 줄여보자

import $ from "jquery";
import { count, PI } from "./common/customUtil.js"; // ./common을 바꿔보자

var moment = require('moment'); 

function createDiv() {
  var elem = document.createElement("div");
  elem.innerHTML = "웹팩을 사용해보겠습니다";
  return elem;
}

document.body.appendChild(createDiv());

$(function() { // html dom 완성시 실행되는 부분 
  console.log("jquery를 불러오는 것을 성공하였습니다");
});

console.log(count(10));
console.log(PI);

1. webpack.config.js에서 resolve.alias에서 별칭을 만들자.

import 할 대상들의 경로가 현재는 길이가 짧지만 중복되는 내용을 줄이는 방안

var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var TerserJSPlugin = require("terser-webpack-plugin");
var ManifestPlugin = require("webpack-manifest-plugin");

module.exports = {
  mode: "development", //배포용으로 변경, development 경우 제대로 압축이 안됨
  // output을 두개로 나눠서 생성한다. 하나는 전체적인 import부분이 example.js
  // libray는 외부의 라이브러리(node_modules에 설치한 라이브러리)
  entry: { main: "./app/js/example.js", library: ["jquery" , "moment"] },
  output: {
    // output으로 배출한 js의 이름은 entry.key 값으로 생성된다.
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },
  resolve : { // 여기서 import할 경로들에 대해서 별칭을 만들어줍니다.
    alias : {
      // 현재 위치(webpack.config.js 파일 위치)에서 css 경로
      Style : path.resolve(__dirname, "./app/css/"), 
      // 현재 위치(webpack.config.js 파일 위치)에서 js/common 경로
      CommonsJS : path.resolve(__dirname, "./app/js/common") // 현재 
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { url: false, sourceMap: true } }
        ]
      }
    ]
  },
  optimization: {
    splitChunks: { //추가된 부분 main.js에서 라이브러리르 분리하는 작업
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "library",
          chunks: "all"
        }
      }
    },
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "style.css" }),
    new ManifestPlugin({
      fileName: "manifest.json",
      basePath: "./dist/"
    }) // 번들링한 모든 결과물을 확인이 가능함.
  ]
};

2. example.js에서 resolve.alias을 사용.

//example.js 일부분 

// import "../css/reset.css"; // 중복을 줄여보자
// import "../css/base.css"; // 중복을 줄여보자
import "Style/reset.css"; // 변경
import "Style/base.css"; // 변경

import $ from "jquery";
// import { count, PI } from "./common/customUtil.js"; // ./common을 바꿔보자
import { count, PI } from "CommonsJS/customUtil.js"; // 변경

결과화면