(에센스) 2020년 7월 12일 웹팩 설정 제3자 loader

le-loader: 정적 자원 처리 모듈, url-loader: 이미지 베이스64 처리

yarn add file-loader-D 또는 npm install file-loader-D yarn add url-loader-D 또는 npm install url-loader-D

module: {
     
    rules: [
      {
     
        test: /\.(png|jpe?g|gif)$/,
        //use loader ， ， loader         
        use: {
     
          loader: "url-loader",
          // options ，           
          options: {
     
            // placeholder    [name]             
            // [ext]             
            // https://webpack.js.org/loaders/file-loader#placeholders            
            name: "[name]_[hash].[ext]",
            //             
            outputPath: "images/",
            // 2048B， base64  Base64 ， JS           
            limit: 2048,
            publicPath: '/images' // CSS ， URL    	        
          }
        }
      }
    ]
  }

CSS 사전 처리

yarn add style-loader css-loader --dev

//   
  module: {
     
    rules: [
      {
     
        test: /\.css$/,
        exclude: /node_modules/,
        use: [{
     
          loader: "style-loader"
        }, {
     
          loader: "css-loader"
        }] // 
        //use: ["style-loader", loader: "css-loader" ]  // 
      }
    ]
  }

less 환경 설정

yarn add less less-loader --dev

//   
  module: {
     
    rules: [
      {
     
        test: /\.less$/,
        exclude: /node_modules/,
        use: [{
     
            loader: "style-loader"
          },
          {
     
            loader: "css-loader"
          },
          {
     
            loader: 'postcss-loader'
          },
          {
     
            loader: "less-loader"
          }
        ] // 
      }
    ]
  }

scss 환경 설정

yarn add node-sass sass-loader --dev

//   
module: {
     
 rules: [{
     
     test: /\.scss$/,
     use: [{
     
         loader: "style-loader"
       }, {
     
         loader: "css-loader"
       }, {
     
         loader: "sass-loader"
       }] // 
       //use: ['style-loader','css-loader','sass-loader'] //  }
     }
 }

PostCSS 관련 구성

yarn add postcss-loader postcss --dev

 module: {
     
    rules: [
      {
     
        test: /\.css$/,
        exclude: /node_modules/,
        use: [{
     
          loader: "style-loader"
        }, {
     
          loader: "css-loader"
        }, {
     
          loader: 'postcss-loader'
        }]
      }
    ]
  }

postcss.config.js

module.exports = {
     
    plugins: {
     
        //require("autoprefixer")
        'autoprefixer':{
     },// 
        // packahe.json 
        // "browserslist": [
        //     "last 10 Chrome versions",
        //     "last 5 Firefox versions",
        //     "Safari >= 6",
        //     "ie> 8"
        //   ],
        // 
        'postcss-preset-env': {
     },
        'postcss-pxtorem': {
     
            rootValue: 10,
            minPixelValue: 2,
            propWhiteList: []
        }
    }
}