스크린샷 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로 묶어줘서 추후 배포에도 용이 합니다.
시리즈물로 만들고 있는 스몬 개발에서 디자인이 구려서 웹팩이랑 머트리얼 디자인 넣어 개발해 보려 하네요
뭔가를 배우면 또 뭔가를 배워야 되는 첩첩 산중의 길 쉽게 가고 싶네요 ㅎㅎ

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

1. 초특급 요약

1.1 nodejs 설치

1.2 의존성 설치

1.3 소스 복붙

3. 실행

4. 빌드

맺음말

스몬 개발 시리즈물

_{Sponsored ( Powered by dclick )}

Guess the Color Game - Day 133 | Mermaidvampire's DAILY Splitter Contest