2020.03.07 - [dev/webpack] - Springboot 기반에 git, npm을 사용한 webpack 환경구축 Part 1
Webpack 기본 설정
프로젝트의 진입점이 src/index 이며 출력 경로가 dist/main.js 이면 웹팩 설정파일을 따로 추가할 필요 없이 npx webpack 명령어를 통해 바로 번들링 가능합니다. 하지만 보통 프로젝트는 저 src/index 경로를 그대로 사용하지 않기 때문에 설정이 필요합니다.
웹팩 실행을 위한 NPM 스크립트 추가
웹팩 실행 시 mode 옵션을 넘기거나 웹팩 설정에 mode 옵션을 줄 수 있습니다. development, production, none 모드가 있는데, 각 모드에 따라서 웹팩에 내장된 최적화를 수행합니다. 여기서는 웹팩 설정 파일에 mode 옵션을 주겠습니다. 편리한 웹팩 실행을 위해 package.json 파일의 scripts 속성에 추가합니다.
"scripts": {
"build": "webpack --config prod.webpack.config.js", // npm run build
"dev": "webpack-dev-server", // npm run dev
"start": "npm run dev" // npm start
},웹팩 설정 파일 (webpack.config.js) 작성
package.json파일이 있는 위치에 webpack.config.js 파일을 새로 추가합니다.
const path = require('path');
module.exports = {
mode:"development",
entry: "./src/main/resources/static/js/app/index.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "bundle.js"
}
}웹팩 개발 서버(webpack-dev-server)
webpack-dev-server는 빠른 Live reload 가능한 개발 서버입니다, 메모리 컴파일을 사용하기 때문에 컴파일 속도가 빠릅니다. webpack.config.js devServer 옵션을 추가할 수 있습니다.
웹팩 개발 서버와 스프링부트 연계
> cd 프로젝트루트\src\main
> mklink /D client resources\static
client <<===>> resources\static에 대한 기호화된 링크를 만들었습니다.Webpack - loader 설정
로더(loader)는 특정 파일을 번들링하는 역할을 합니다. javascript가 아닌 jpg, png와 같은 이미지 파일 css, sass 등의 파일까지 번들링해서 js 파일로 생성합니다. 이미지를 번들링하는 역할은 이미지 로더가, 스타일을 번들링하는 역할은 스타일 로더가, 파일을 번들링하는 것은 파일 로더가 담당합니다. 로더는 웹팩의 핵심으로 언급한 것 외에도 다양합니다. 웹팩 - Asset Management 사이트를 방문하면 로더에 대해 더 자세히 알 수 있습니다. 사용가능한 로더 목록은 https://webpack.js.org/loaders/ 를 참고하면 됩니다.
CSS 로딩하기
module.exports = {
mode:"development",
entry: "./src/main/resources/static/js/app/index.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "bundle.js"
},
module: {
rules:[
{
test: /\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
}이미지 로딩하기
url-loader
폰트 로딩하기
module.rules에 추가
{
// test: /\.(png|jpe?g|gif|ico)$/i,
test: /\.(png|jpe?g|gif|ico|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'assets',
}
},
{
loader: 'image-webpack-loader',
options: {
// Compress JPEG images
mozjpeg: {
progressive: true,
quality: 65
},
// Compress PNG images
optipng: {
enabled: true,
},
// Compress PNG images
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
// Compress GIF images
gifsicle: {
interlaced: false,
},
// Compress JPG & PNG images into WEBP
webp: {
quality: 75
}
}
}
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
}],
}데이터 로딩하기
file-loader
Webpack 빌드 제외
$ npm install copy-webpack-plugin --save-devwebpack.config.js
const CopyPlugin = require('copy-webpack-plugin');
...
plugins: [
...
new CopyPlugin(
[
{
// 웹팩 사용 제외 html 정의
from: path.resolve(__dirname, classPath, 'templates'),
ignore: ['map/**/*', 'system/index*', 'publish/**/*']
}, {
from: staticPath,
// to: outPath,
ignore: ['public/**/*', 'images/map/**/*']
}
]
),
]TroubleShooting
npm run devserver 오류
ERROR in ./src/main/resources/static/js/app/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
Module build failed (from ./node_modules/babel-loader/lib/index.js): · Issue #8599 · babel/babel
Caused by: java.net.BindException: Address already in use: bind 오류
- intelliJ에서 같은 포트번호로 Alt + 4 Run 창에 2개 이상 실행 중일 때 발생. 다 끄고 다시 시도
- 위 방법으로 해결 안되면 포트 8080을 점유하고 있는 프로세스 검색
