Published: 13 Nov 2018 › Updated: 13 Nov 2018![[webpack] 머트리얼 디자인으로 개발하자 !](https://i.ecency.com/p/JnhEU9gVzZMdMsoD3qB3xs86BHCNXzS9oqxxBCUW45a1N5d7JE1W4M7BtsjeBtsj6oqhyBYNouE5zTKTT9P6RPVHRePc4cLQAm2rARU2spiEKpJ6ggb3Ye2TfqNJSnXp8eXzf9EsmNMxVFaSQJhQ6cbXa7WBduR6BCcn9D5WipoWFda3S48h3xQdzr5QVDvMDLWjcHfmzEmDRvR6BTWeUH5Eppv5cPdxiKvGKvNeemsHYbd7V1Tk3hDJEQVvtuepQrF1wjcsCyq99kBdrQ7G1nKGidRhYf2mHwr7gCPHMe8R896ucJRDQ4LU1rajSvpNr?format=match&mode=fit&height=377)
[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...
Leave [webpack] 머트리얼 디자인으로 개발하자 ! to:
Best Posts From wonsama
We have not curated any of wonsama's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.