https://poiemaweb.com/es6-babel-webpack-2
Webpack | PoiemaWeb
앞에서 테스트해 본 바와 같이 ES6 모듈을 현재의 브라우저에서 사용하려면 [RequireJS](http://requirejs.org/) 또는 [SystemJS](https://github.com/systemjs/systemjs)와 같은 모듈 로더가 필요하다. [Webpack](https://webpac
poiemaweb.com
이전내용
babel + webpack 세팅
-> Scss 를 css 로 바꿔야 되는데, 이를 webpack 에서 같이 진행 할 수 있는것 같다.
2.6 Sass 컴파일
Webpack을 통해 Sass를 컴파일하는 방법으로 2가지가 있다.
(1) bundle.js 파일에 포함시키는 방법
(2) 별도의 css 파일로 분리하는 방법
2.6.1 컴파일된 css를 bundle.js 파일에 포함시키는 방법
필요한 패키지를 설치해보니..
npm install node-sass style-loader css-loader sass-loader --save-dev
node-sass : 실제로 Sass를 css로 컴파일하는 라이브러리 ... X
deprecated : 구식? 이라는 뜻으로 해당 기능을 설치하는걸 권장하지 않음.
특히 node-sass 보다는 Dass sass 를 권장하는듯 함..!
4-5년 전의 글이긴 하지만 이런 부분이 프론트가 계속 바뀐고 공부해야 된다는게 아닐까 싶기도 하다..
https://poiemaweb.com/sass-webpack
Webpack + Sass | PoiemaWeb
poiemaweb.com
node-sass 대신 sass 를 사용하며 다른 라이브러리는 그대로 사용
gpt -> 웹 개발에서 CSS와 Sass를 처리하기 위해 Webpack과 함께 사용되는 로더입니다.
- sass-loader : Sass 파일을 CSS로 변환합니다.
- css-loader : CSS 파일을 모듈로 변환합니다.
- style-loader : JavaScript 파일에 CSS를 삽입합니다. (1번방법)
- .scss 파일이 sass-loader를 통해 CSS로 변환된 후, css-loader와 style-loader를 통해 HTML 문서에 삽입됩니다.
npm install --save-dev sass css-loader sass-loader style-loader
package.json 에 추가된것을 확인
{
"name": "es6_setting",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "webpack -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@babel/cli": "^7.24.8",
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"babel-loader": "^9.1.3",
"css-loader": "^7.1.2",
"sass": "^1.77.8",
"sass-loader": "^16.0.0",
"style-loader": "^4.0.0",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4"
},
"dependencies": {
"@babel/polyfill": "^7.12.1"
}
}
webpack.config.js 파일 수정
entry 추가
module 의 rules [ { } , { scss 관련}] 부분에 추가
const path = require('path');
module.exports = {
// enntry file
// entry: './src/js/main.js',
entry: ['@babel/polyfill', './src/js/main.js', './src/sass/main.scss'],
// 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
output: {
path: path.resolve(__dirname, 'dist/js'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src/js')
],
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
],
exclude: /node_modules/
}
]
},
devtool: 'source-map',
mode: 'development'
};
테스트를 위해 3개의 Sass 파일을 src/sass 폴더와 src/sass/partials 폴더에 추가한다.
// src/sass/main.scss
@import "partials/vars";
@import "partials/body";
// src/sass/partials/_vars.scss
$font_color: #333;
$font_family: Arial, sans-serif;
$font_size: 16px;
$line_height: percentage(20px / $font_size);
// src/sass/partials/_body.scss
body {
color: $font_color;
// Property Nesting
font: {
size: $font_size;
family: $font_family;
}
line-height: $line_height;
}
npm run build 실행
대충 잘 되다가 warning 이 떳는데 잘 읽어보니까 나누기(/) 막쓰지 말라는 뜻인데, 전에 본 적이 있다.
// src/sass/partials/_vars.scss
$font_color: red;
$font_family: Arial, sans-serif;
$font_size: 32px;
$line_height: percentage(calc(20px / $font_size));
다음과 같이 calc 로 감싸주면 해결된다. color 랑 size 도 조금 수정해줬다.
html 문서를 다음과 같이 수정하고
<!DOCTYPE html>
<html>
<head>
<script src="./dist/js/bundle.js"></script>
</head>
<body>
Hello world!
</body>
</html>
다음과 같이 css 가 잘 적용되는것이 확인된다.
2.6.2 컴파일된 CSS를 별도의 CSS 파일로 분리하는 방법
bundle.js 파일에 컴파일된 css를 포함시키지 않고, 별도의 css 파일로 분리해서 하나의 파일로 번들링해보자.
mini-css-extract-plugin : Webpack 플러그인으로, CSS를 별도의 파일로 추출하는 데 사용됩니다. (2번방법)
npm install --save-dev mini-css-extract-plugin
webpack.config.js 파일을 아래와 같이 수정한다.
- 설치한 라이브러리 mini-css-extract-plugin 를 불러온다.
- output 경로를 수정한다.
- plugins 속성을 설정한다. 번들링된 CSS 파일이 저장될 경로
- style-loader (1번방법) 대신 MiniCssExtractPlugin.loader (2번방법)로 변경
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// enntry file
// entry: './src/js/main.js',
entry: ['@babel/polyfill', './src/js/main.js', './src/sass/main.scss'],
// 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
plugins: [
// 컴파일 + 번들링 CSS 파일이 저장될 경로와 이름 지정
new MiniCssExtractPlugin({ filename: 'css/style.css' })
],
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src/js')
],
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
},
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
],
exclude: /node_modules/
}
]
},
devtool: 'source-map',
mode: 'development'
};
그리고 npm run build 실행
style.css 파일이 생성됨
/*!*************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/sass/main.scss ***!
\*************************************************************************************************************/
body {
color: red;
font-size: 32px;
font-family: Arial, sans-serif;
line-height: 62.5%;
}
/*# sourceMappingURL=style.css.map*/
css 를 적용하기 위해서 html 에 link 로 추가
<!DOCTYPE html>
<html>
<head>
<link href="./dist/css/style.css" rel="stylesheet"></link>
<script src="./dist/js/bundle.js"></script>
</head>
<body>
Hello world!
</body>
</html>
잘된다..
뇌피셜로 정리해보자면...
하위 버전에서 최신 ES6 이상 문법을 지원하기 위해서 Babel 을 적용하였고,
기능별/모듈별로 개발하려고 js를 쪼갰는데, 다시 합치기 위해서 webpack 이 필요했으며,
sass 를 사용하여 css 도 쪼갰는데, webpack plugin 을 사용해서 합쳤다(번들링)
이후에는 Prettier / ESLint 를 함께 적용해 보겠다...