[webpack] 머트리얼 디자인으로 개발하자 !

in #kr • 6 years ago (edited)

스크린샷 2018-11-13 오후 11.04.49.png

오픈소스 기반 디자인 개발 시스템으로 아름다운 제품을 손쉽게 만들 수 있습니다.

아래 출처 사이트 가면 정말 자세하게 하나하나 설명해주면서 따라 하실 수 있습니다. (단, 영문)

원문출처 : https://material.io/develop/web/docs/getting-started/

1. 초특급 요약

1.1 nodejs 설치

https://nodejs.org

1.2 의존성 설치

npm install --save-dev webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader
npm install --save-dev @material/button
npm install --save-dev autoprefixer postcss-loader
npm install --save-dev babel-core@6 babel-loader@7 babel-preset-es2015 babel-plugin-transform-object-assign
npm install --save-dev @material/ripple

1.3 소스 복붙

  • index.html
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="bundle.css">
    </head>
    <body>
        <button class="foo-button mdc-button">
        Button
        </button>
        <script src="bundle.js" async></script>
    </body>
</html>
  • app.js
import {MDCRipple} from '@material/ripple/index';
const ripple = new MDCRipple(document.querySelector('.foo-button'));
  • app.scss
@import "@material/button/mdc-button";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}
  • webpack.config.js
const autoprefixer = require('autoprefixer');

module.exports = [{
  entry: ['./app.scss', './app.js'],
  output: {
    // This is necessary for webpack to compile
    // But we never use style-bundle.js
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          { loader: 'extract-loader' },
          { loader: 'css-loader' },
          {
            loader: 'postcss-loader',
            options: {
               plugins: () => [autoprefixer()]
            }
          },
          { loader: 'sass-loader',
            options: {
              includePaths: ['./node_modules'],
            }
          },
        ]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
          plugins: ['transform-object-assign']
        },
      },
    ]
  },
}];
  • package.json
{
  "name": "mdesign",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "css-loader": "^1.0.1",
    "extract-loader": "^3.0.0",
    "file-loader": "^2.0.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.11.3"
  },
  "devDependencies": {
    "@material/button": "^0.41.0",
    "@material/ripple": "^0.41.0",
    "autoprefixer": "^9.3.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-preset-es2015": "^6.24.1",
    "postcss-loader": "^3.0.0"
  },
  "scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3. 실행

npm start

4. 빌드

npm run build

  • 결과물로 bundle.js, bundle.css 파일이 최종적으로 생성됨
  • 운영환경(production)에서는 index.html, bundle.js, bundle.css 위 3개 파일만 있음 땡 !!!

맺음말

  • 서론본론 없이 결과물만 남기네요 ... 설명이 더 힘들거 같아서 그냥 기록용
  • webpack 왜 좋은가 ? 개발 분량이 확 줄고 모듈단위 개발이 가능해 지며 또한 bundle로 묶어줘서 추후 배포에도 용이 합니다.
  • 시리즈물로 만들고 있는 스몬 개발에서 디자인이 구려서 웹팩이랑 머트리얼 디자인 넣어 개발해 보려 하네요
  • 뭔가를 배우면 또 뭔가를 배워야 되는 첩첩 산중의 길 쉽게 가고 싶네요 ㅎㅎ

스몬 개발 시리즈물

Sponsored ( Powered by dclick )
Guess the Color Game - Day 133 | Mermaidvampire's DAILY Splitter Contest

Hello, awesome Steemheads! About GUESS THE COLOR GAM...

#kr-dev #webpack #jjangjjangman #busy
6 years ago in #kr by
$1.57
  • Past Payouts $1.57
  • - Author $1.23
  • - Curators $0.35
72 votes
Reply 6
Sort:  
  • Trending
    • [-]
     6 years ago  

    jjm.jpeg
    짱짱맨 호출에 응답하여 보팅하였습니다.

    짱짱맨은 저자응원 프로그램입니다. 더 많은 저자 분들에게 더 큰 혜택을 드리고자 스파임대 스폰서를 받고 있습니다. 스폰서 참여방법과 짱짱맨 프로그램에 관해서는 이 글Vote for @bukio을 읽어 주세요. 기업형 예비증인 북이오(@bukio)가 짱짱맨 프로그램을 운영하고 있습니다. 여러분의 증인 보팅은 큰 힘이 됩니다.

    $0.00
      Reply
      [-]
       6 years ago  

      Hi @wonsama!


      Your UA account score is currently 3.658 which ranks you at #5349 across all Steem accounts.
      Your rank has improved 44 places in the last three days (old rank 5393).Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!

      In our last Algorithmic Curation Round, consisting of 239 contributions, your post is ranked at #218.

      Evaluation of your UA score:
      • You're on the right track, try to gather more followers.
      • You have already convinced some users to vote for your post, keep trying!
      • Try to work on user engagement: the more people that interact with you via the comments, the higher your UA score!

      Feel free to join our @steem-ua Discord server

      $0.00
        Reply
        [-]
         6 years ago  

        이건 또 뭔가요???

        요약에 설명이 없다니...

        A4 용지 10장으로 정리해서 저에게 주시길~ ㅎㅎㅎ

        $0.00
          Reply
          [-]
           6 years ago  

          원문보 보시면 아시겠지만 좀 길어서요 ㅋ

          저같은 초딩영어도 알아듣는 수준이니 ㅎㅎ

          원서로 가즈아

          $0.00
            Reply
            [-]
             6 years ago  

            음... 제가 알고 있는 머테리얼디자인이 맞는 건가용? 회색스러운건 바탕이요 허연건 글씨네용. +.+
            보클 합니당~

            $0.00
              Reply
              [-]
               6 years ago  

              네 머트리얼디자인 맞습니다 ㅋ

              코딩으로 처리를 해줘서요 :)

              $0.00
                Reply