'webpack css'에 해당되는 글 2건

[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 를 사용해서 해결을 해야 합니다. 

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를 불러온 상황