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

wonsama (79)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 wonsama (79)

$1.57

Sort:

Trending

[-]

bukio (61) 6 years ago

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

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

$0.00

[-]

steem-ua (64) 6 years ago

Hi @wonsama!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
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).

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

[-]