[webpack] 머트리얼 디자인으로 개발하자 !
오픈소스 기반 디자인 개발 시스템으로 아름다운 제품을 손쉽게 만들 수 있습니다.
아래 출처 사이트 가면 정말 자세하게 하나하나 설명해주면서 따라 하실 수 있습니다. (단, 영문)
원문출처 : 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로 묶어줘서 추후 배포에도 용이 합니다.
- 시리즈물로 만들고 있는 스몬 개발에서 디자인이 구려서 웹팩이랑 머트리얼 디자인 넣어 개발해 보려 하네요
- 뭔가를 배우면 또 뭔가를 배워야 되는 첩첩 산중의 길 쉽게 가고 싶네요 ㅎㅎ
스몬 개발 시리즈물
- v0.04 : 기본 색상을 gray 로 캐릭터 클릭하면 색상 활성화 및 상단에 선택한 캐릭터 명 및 마나 합계 표시
- v0.03 : 카드 기준 배경색 추가 + 이름표시 + 능력치 표시
- v0.02 : 색상 + 버전 기준 교차 필터링 추가
- v0.01 : 최초작성
Sponsored ( Powered by dclick )
Guess the Color Game - Day 133 | Mermaidvampire's DAILY Splitter Contest
Hello, awesome Steemheads! About GUESS THE COLOR GAM...
짱짱맨 호출에 응답하여 보팅하였습니다.
짱짱맨은 저자응원 프로그램입니다. 더 많은 저자 분들에게 더 큰 혜택을 드리고자 스파임대 스폰서를 받고 있습니다. 스폰서 참여방법과 짱짱맨 프로그램에 관해서는 이 글을 읽어 주세요. 기업형 예비증인 북이오(@bukio)가 짱짱맨 프로그램을 운영하고 있습니다. 여러분의 증인 보팅은 큰 힘이 됩니다. Vote for @bukio
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:
Feel free to join our @steem-ua Discord server
이건 또 뭔가요???
요약에 설명이 없다니...
A4 용지 10장으로 정리해서 저에게 주시길~ ㅎㅎㅎ
원문보 보시면 아시겠지만 좀 길어서요 ㅋ
저같은 초딩영어도 알아듣는 수준이니 ㅎㅎ
원서로 가즈아
음... 제가 알고 있는 머테리얼디자인이 맞는 건가용? 회색스러운건 바탕이요 허연건 글씨네용. +.+
보클 합니당~
네 머트리얼디자인 맞습니다 ㅋ
코딩으로 처리를 해줘서요 :)