'[webpack]'에 해당되는 글 8건

[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"; // 변경

결과화면

webpack.config.js에서 webpack.optimize.CommonsChunkPlugin를 없애고, optimization.splitChunks를 바꿔준다.

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: "production", //배포용으로 변경, 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")
  },
  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/"
    }) // 번들링한 모든 결과물을 확인이 가능함.
  ]
};

[webpack]  javascript 라이브러리의 분리

https://minaminaworld.tistory.com/119 에서 선행되어서 이어지는 내용입니다. 

문제 상황

     -  자바스크립트 라이브러리와 main.js를 분리해야 되는 상황 

     -  entry에서 분개를 한다.

1. 예를 들어서 외부라이러리 jquery , moment를 쓴다.

    - 명령어 npm i jquery --save , npm i moment(시간 관련 라이브러리)

    - 화면에 영향을 미치는 요소임으로 pakage.json에 dependencies 안에 기록이 된다.

    - example.js 파일에서 jquery를 import 시켜준다.

    - 그리고, 아래의 jquery를 이용해서 로그를 찍어준다.

// example.js
import "../css/reset.css";
import "../css/base.css";
import $ from "jquery"; // 추가
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를 불러오는 것을 성공하였습니다");
});

2. webpack.config.js에서 entry 부분과  output.filename을 변경해준다.

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: "production", //배포용으로 변경, 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")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { url: false, sourceMap: true } }
        ]
      }
    ]
  },
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "style.css" }),
    new ManifestPlugin({
      fileName: "manifest.json",
      basePath: "./dist/"
    }) // 번들링한 모든 결과물을 확인이 가능함.
  ]
};

3. 빌드 - 성공 , 그러나 파일의 크기를 자세히 보자.

    - example.js 코드는 16줄 밖에 안되는 library.js와 크기가 동일하다.

    - 즉, main.js , library 안에도 moment,jquery 가 있는 경우, 

    - 중복으로 불러온 상황임으로 개선을 해야함.

    -> 따로 분리되지 않은 상황

4. webpack.config.js에 optimization.splitChunks를 추가

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: "production", //배포용으로 변경, 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")
  },
  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/"
    }) // 번들링한 모든 결과물을 확인이 가능함.
  ]
};

5. 빌드 - 성공 , main.js와 library.js 크기가 달라졌음을 확인

6. index.html에 libray.js와 main.js 파일로 각각 설정 

[webpack]  javascript 압축(min) 파일 만들기(terser-webpack-plugin)

https://minaminaworld.tistory.com/118 에서 선행되어서 이어지는 내용입니다. 

문제 상황

     - javascript 압축이 안되는 상황.

     ->  min 파일을 만들어 줄 수 있는 plugin을 사용함.

1. terser-webpack-plugin 플러그인 설치

      - javascript 압축이 안되는 상황.

      - 명령어 :  npm i terser-webpack-plugin -D

                     (npm install terser-webpack-plugin --save-dev)

2. webpack 빌드 - 성공 

      - javascript 압축이된 상황 

      - main.js 파일이 min 파일처럼 압축이 된 상황.

[webpack] css 압축(min) 파일 만들기

(optimize-css-assets-webpack-plugin ,

mini-css-extract-plugin)

https://minaminaworld.tistory.com/116 에서 선행되어서 이어지는 내용입니다. 

문제 상황

     - 기존의 ExtractTextPlugin의 경우 css 파일이 min 파일 처럼 생성이 안됨.

     ->  min 파일을 만들어 줄 수 있는 plugin을 사용함.

1. optimize-css-assets-webpack-plugin , mini-css-extract-plugin 설치

     - 명령어 :  npm i optimize-css-assets-webpack-plugin -D

                  (npm install optimize-css-assets-webpack-plugin --save-dev)

     - 명령어 :  npm i mini-css-extract-plugin -D

                  (npm install mini-css-extract-plugin --save-dev)

     - package.json에 plugin을 설치 확인 

2. webpack..config.js에 적용

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");

module.exports = {
  mode: "production", //배포용으로 변경, development 경우 제대로 압축이 안됨 
  entry: "./app/js/example.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { url: false, sourceMap: true } }
        ]
      }
    ]
  },
  optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})]
  },
  plugins : [new MiniCssExtractPlugin({filename : "style.css"})]
};

3. webpack 빌드  - 성공

     -  style.css 파일이 min 파일 처럼 생성 

4. 문제 상황 

     - main.js는 압축이 안되는 상황 

     -> TerserJSPlugin 를 사용해서 해결을 해야 합니다. 

웹팩 에러가 나타는 상황

Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get 

npm install extract-text-webpack-plugin@next 을 사용하시면 됩니다

https://minaminaworld.tistory.com/115 에서 선행되어서 이어지는 내용입니다. 

[webpack] webpack css 파일만 분리하기

1. 하나로 모두 다 묶인 상황 

     - 웹팩을 사용하면 main.js에 모두 다 묶인 상황 

     - css만 따로 분리해서 만들어야 될 경우

2.  extract-text-webpack-plugin 설치하기

     - 명령어 : npm i extract-text-webpack-plugin -D

     - package.json 파일에 devDependencies에  extract-text-webpack-plugin가 추가될 것입니다.

3.  webpack.config.js 파일에 extract-text-webpack-plugin 사용하기

var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./app/js/example.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //use : ['style-loader','css-loader']
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
          })
      }
    ]
  },
  plugins : [new ExtractTextPlugin("style.css")]
};

4. webpack 빌드 - 실패 , extract-text-webpack-plugin@next 으로 재설치

     - 명령어 : npm install extract-text-webpack-plugin@next

     - package.json 파일에 devDependencies에  extract-text-webpack-plugin가 추가될 것입니다.

5. webpack 빌드 - 성공

     - 명령어 : webpack

     -  dist 폴더에 main.js, style.css 파일이 최종적으로 생성됩니다.

6. 결과화면

     -  style.css 와 main.js를 불러온 상황

[webpack] 파일 하나로 묶기

1. 기본적인 HTML,CSS,JS 구성하기

     - 웹팩을 적용하기 전 html 구성.

2. Wepack 사용하기 위한 초기 구성

     -  명령어 : npm init -y

     -  package.json 생성

3. wepack, webpack-cli 설치

     -  명령어 : npm install webpack 또는 npm i webpack --save-dev

     -  명령어 : npm install webpack-cli 또는 npm i webpack-cli --save-dev

     - 결과 화면 

     -  nodemodules(폴더), package-lock.json 생성

     -  package.json에 devDependencies에 webpack 추가된 상황 

        --save-dev 또는 -D이 빠진 경우 dependencies에 추가될 것 입니다.

4. Webpack 사용하기 위한 webpack.config.js 만들기

     -  webpack.config.js는 따로 만들어주는 것이 아닌 직접 작성해야함

     -  다른 이름으로 지정이 가능하나 webpack 빌드시 자동으로 wepback.config.js 찾음

var path = require("path");

module.exports = {
    mode: "development",
    entry : "./app/js/example.js",
    output : {
        filename : "main.js",
        path : path.resolve(__dirname , "dist")
    }
}

      - 모드 :  개발자 모드 ( production : 배포용 모드)

      - entry :  메인으로 불러온 js 파일 위치 

      - output :  파일을 최종적으로 생성할 위치(dist 폴더에 main.js로 생성)

5.  example.js에 css 파일 import 시키기

      - css 파일들을 ES6 import를 사용해서 불러옵니다.

6.1 Webpack 빌드  - 실패 

     -  명령어 : wepback

     -  이유 : css를 묶기 위해서는 css-loader를 설치해야함.

6.2 CSS-loader와 style-loader 설치

     -  명령어 : npm i css-loader -D 또는 npm install  css-loader --save-dev

     -  명령어 : npm i style-loader -D 또는 npm install  style-loader --save-dev

     -  css를 묶어주기 위해서 모듈을 설치합니다.

     -  devDependencies에 css-loader가 추가된 상황 (style-loader도 설치해주세요)

6.3 webpack.confing.js 파일에 css-loader , style-loader를 사용한다고 명시하기

var path = require("path");

module.exports = {
  mode: "development",
  entry: "./app/js/example.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use : [style-loader,'css-loader']
      }
    ]
  }
};

7. Webpack 빌드  - 성공

       -  dist/main.js 파일 생성

8. html 파일 적용 및 결과 화면

       -  dist/main.js 파일 사용

       -  main.js 파일로 css까지 모두 묶어버린 상황