LWW

CS / FrontEnd / Programming / DataScience

2 분 소요

1. 정적 파일 연결

https://www.icoconverter.com/에서 원하는 이미지 변경

  • 원본 이미지와 변환된 이미지를 프로젝트 폴더 루트 경로에 복사
  • static 폴더를 생성하고 favicon.ico와 원본 이미지를 이 폴더에 넣어줌
  • static 폴더 안에 images 폴더를 생성하고 원본 이미지를 이 폴더에 넣어줌


webpack2


<!-- index.html -->

<body>
  <h1>Hello Webpack!!</h1>
  <img src="./images/bear.jpg" alt="Bear">
</body>



# terminal

$ npm i -D copy-webpack-plugin



// webpack.config.js

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
  entry: './js/main.js',
  output: {
    clean: true
  },
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    // static 폴더 안의 내용이 copy되어 dist폴더로 들어가는 plugin
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    })
  ],
  devServer: {
    host: 'localhost'
  }
}



# terminal

$ npm run dev


2. Module

static 폴더 안에 css 폴더 생성하고 main.css 파일 생성

/* static/css/main.css */

body {
  background-color: orange;
}



<!-- index.html -->

<head>
  <title>Hello Webpack!</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
  <link rel="stylesheet" href="./css/main.css">
</head>



# terminal

$ npm run dev


루트 경로에 css 폴더 생성하고 main.css 파일 생성

/* css/main.css */

body {
  background-color: orange;
}



// js/main.js

import '../css/main.css'

console.log('Webpack!')


CSS 파일을 읽을 수 있는 패키지 설치

# terminal

$ npm i -D css-loader style-loader



// webpack.config.js

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
  entry: './js/main.js',
  output: {
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,  // .css로 끝나는 파일
        use: [  // 순서 중요!!
          'style-loader',  // HTML의 style 태그에 해석된 내용을 삽입하는 용도
          'css-loader'  // Javascript에서 css파일을 해석하는 용도
        ]
      }
    ]
  },
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    })
  ],
  devServer: {
    host: 'localhost'
  }
}



# terminal

$ npm run dev


3. SCSS

루트 경로에 scss 폴더 생성하고 main.scss 파일 생성

# terminal

$ npm i -D sass-loader sass



/* scss/main.css */

$color--black: #000;
$color--white: #fff;

body {
  background-color: $color--black;
  h1 {
    color: $color--white;
    font-size: 50px;
  }
}



// js/main.js

import '../scss/main.scss'

console.log('Webpack!')



// webpack.config.js

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
  entry: './js/main.js',
  output: {
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.s?css$/,  // .scss or .css로 끝나는 파일
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'  // Webpack에서 scss파일을 읽어내는 용도
        ]
      }
    ]
  },
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    })
  ],
  devServer: {
    host: 'localhost'
  }
}



# terminal

$ npm run dev


webpack3

댓글남기기

참고