포트폴리오를 만들기 시작해 무료로 공개한다(Webpack4 사용해 보았다)
제작 포트폴리오
정적 웹 사이트를 만드는데 Webpack을 사용한 적이 없었습니다만, 지금 다시 사용해 보았습니다.
SPA 만들 때 Angular CLI를 한 번 두드리는 것만으로 마음대로 온다
유익한 편리 도구라고 생각했으므로, 스스로 사용법을 찾은 적이 없었습니다.
애초에 정적 웹사이트를 만들 기회가 없었다. . .
그냥 며칠 전에 webpack 버전 4가 출시 된 것 같습니다.
조건은 없지만, 설치하면 자동적으로 최신 버전이 되었으므로, 그렇게 합니다.
v4.0.0-beta.0의 변경 사항
Webpack에서 하고 싶은 일
· 로컬에서 웹 서버를 시작하고 동작 확인
⇨ webpack-dev-server 사용
· js 통합
⇨ webpack.config.js의 'entry'및 'output'옵션으로 정의
・scss→css로 변환
⇨ style-loader css-loader를 이용하여 webpack.config.js에서 변환 설정
※참고: webpack 4 시작: 스타일시트를 캡처하는 방법
· html 파일을 src → dist에 복사
⇨ copy-webpack-plugin 사용
· 변경을 감지하고 재구성
⇨ ⇨ webpack-dev-server가 마음대로 해준다.
버전 4의 변경 사항을 조금만 사용해 본 점
· mode 옵션 ( 'development' or 'production')을 지정하여 개발 환경에서만 소스 맵을 활성화합니다.
우선 npm install
npm i -D webpack webpack-cli webpack-dev-server style-loader css-loader --save
npm i copy-webpack-plugin --save
Webpack 구성 파일 만들기
webpack.config.jsconst CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
mode: 'development', // [v4から] development or production
entry: `./src/app/index.js`,
output: {
path: `${__dirname}/dist`,
filename: 'bundle.js'
},
module: {
rules: [
{
//SCSS⇨CSSへの変換設定
test: /\.scss/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
url: false,
sourceMap: true,
importLoaders: 2
},
},
'sass-loader'
]
}
]
},
// src配下のhtmlファイルを出力先distディレクトリに全コピー
plugins: [
new CopyWebpackPlugin([
{ from: './src/*.html', to: './[name].[ext]' },
])
]
};
Webpack 작업 러너 추가
package.json{
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack",
+ "start": "webpack && webpack-dev-server"
・・・・・
},
"devDependencies": {
"css-loader": "^0.28.10",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"webpack-dev-server": "^3.0.0"
・・・・・
},
"dependencies": {
"copy-webpack-plugin": "^4.4.2"
・・・・・
}
}
Webpack 빌드 실행 및 서버 시작
npm run start
빌드 할 수 있었고 서버도 무사히 움직였다. . .
웹사이트 방문
자, 아직 포트폴리오의 내용을 어떻게 하자.
Reference
이 문제에 관하여(포트폴리오를 만들기 시작해 무료로 공개한다(Webpack4 사용해 보았다)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/uegaki-masaaki/items/b5d3454d543e3d96cb99
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
· mode 옵션 ( 'development' or 'production')을 지정하여 개발 환경에서만 소스 맵을 활성화합니다.
우선 npm install
npm i -D webpack webpack-cli webpack-dev-server style-loader css-loader --save
npm i copy-webpack-plugin --save
Webpack 구성 파일 만들기
webpack.config.jsconst CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
mode: 'development', // [v4から] development or production
entry: `./src/app/index.js`,
output: {
path: `${__dirname}/dist`,
filename: 'bundle.js'
},
module: {
rules: [
{
//SCSS⇨CSSへの変換設定
test: /\.scss/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
url: false,
sourceMap: true,
importLoaders: 2
},
},
'sass-loader'
]
}
]
},
// src配下のhtmlファイルを出力先distディレクトリに全コピー
plugins: [
new CopyWebpackPlugin([
{ from: './src/*.html', to: './[name].[ext]' },
])
]
};
Webpack 작업 러너 추가
package.json{
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack",
+ "start": "webpack && webpack-dev-server"
・・・・・
},
"devDependencies": {
"css-loader": "^0.28.10",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"webpack-dev-server": "^3.0.0"
・・・・・
},
"dependencies": {
"copy-webpack-plugin": "^4.4.2"
・・・・・
}
}
Webpack 빌드 실행 및 서버 시작
npm run start
빌드 할 수 있었고 서버도 무사히 움직였다. . .
웹사이트 방문
자, 아직 포트폴리오의 내용을 어떻게 하자.
Reference
이 문제에 관하여(포트폴리오를 만들기 시작해 무료로 공개한다(Webpack4 사용해 보았다)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/uegaki-masaaki/items/b5d3454d543e3d96cb99
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
npm i -D webpack webpack-cli webpack-dev-server style-loader css-loader --save
npm i copy-webpack-plugin --save
webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
mode: 'development', // [v4から] development or production
entry: `./src/app/index.js`,
output: {
path: `${__dirname}/dist`,
filename: 'bundle.js'
},
module: {
rules: [
{
//SCSS⇨CSSへの変換設定
test: /\.scss/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
url: false,
sourceMap: true,
importLoaders: 2
},
},
'sass-loader'
]
}
]
},
// src配下のhtmlファイルを出力先distディレクトリに全コピー
plugins: [
new CopyWebpackPlugin([
{ from: './src/*.html', to: './[name].[ext]' },
])
]
};
Webpack 작업 러너 추가
package.json{
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack",
+ "start": "webpack && webpack-dev-server"
・・・・・
},
"devDependencies": {
"css-loader": "^0.28.10",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"webpack-dev-server": "^3.0.0"
・・・・・
},
"dependencies": {
"copy-webpack-plugin": "^4.4.2"
・・・・・
}
}
Webpack 빌드 실행 및 서버 시작
npm run start
빌드 할 수 있었고 서버도 무사히 움직였다. . .
웹사이트 방문
자, 아직 포트폴리오의 내용을 어떻게 하자.
Reference
이 문제에 관하여(포트폴리오를 만들기 시작해 무료로 공개한다(Webpack4 사용해 보았다)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/uegaki-masaaki/items/b5d3454d543e3d96cb99
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
{
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack",
+ "start": "webpack && webpack-dev-server"
・・・・・
},
"devDependencies": {
"css-loader": "^0.28.10",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"webpack-dev-server": "^3.0.0"
・・・・・
},
"dependencies": {
"copy-webpack-plugin": "^4.4.2"
・・・・・
}
}
npm run start
빌드 할 수 있었고 서버도 무사히 움직였다. . .
웹사이트 방문
자, 아직 포트폴리오의 내용을 어떻게 하자.
Reference
이 문제에 관하여(포트폴리오를 만들기 시작해 무료로 공개한다(Webpack4 사용해 보았다)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/uegaki-masaaki/items/b5d3454d543e3d96cb99
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(포트폴리오를 만들기 시작해 무료로 공개한다(Webpack4 사용해 보았다)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/uegaki-masaaki/items/b5d3454d543e3d96cb99텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)