'webpack'에 해당되는 글 2건

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] 파일 하나로 묶기

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까지 모두 묶어버린 상황