PB : Tried to apply @mixin to Sass ....
// Variables
$grey : grey;
$black : #000;
Solution : simplyfying 'webpack.config.js' for 'scss'
const path = require('path')
const webpack = require('webpack')
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
name : 'wordrelay-setting',
// process.env.NODE_ENV = 'production' : 'production' 베포시 왼쪽과 같이 설정
mode : 'development' , // 실서비스 : production
devtool : 'eval',
resolve : {
extensions : ['.js', '.jsx']
},
entry : {
app : ['./client']
}, // 입력
module : {
rules : [{
test : /\.jsx?$/,
loader : 'babel-loader',
options : {
// preset : 자동으로 예전 브라우저 지원해줌
presets : [
[ '@babel/preset-env', {
targets : {
// 원하는 브라우저만 맞춰주기 !
// ' 5% > in KR '
browsers : ['last 2 chrome versions']
},
}],
'@babel/preset-react'
],
plugins : [
'@babel/plugin-proposal-class-properties',
// below plugin : for hot-loader
'react-refresh/babel'
]
}
},
{
test : /\.css$/,
use : [
'style-loader', // 3. apply js to file
// Use Css Modules
'css-loader', // 2. Turns css into js( read css files)
'resolve-url-loader'
]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{ // semantic-ui-css
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000,
},
}
]
},
plugins : [ // 추가적으로 하고 싶은 작업
new RefreshWebpackPlugin() ,
new TerserPlugin()
] , // 확장 프로그램
output : {
// path : 실제 경로
path : path.join(__dirname , 'dist'),
filename : 'app.js',
// publicPath : 가상 경로
publicPath : '/dist/'
}, // 출력,
devServer: {
historyApiFallback: true, // react-router-dom 새로고침 기능
publicPath : '/dist/',
hot : true
}
}PB : too many plugins
at the very beginnin, I added too many plugins that is unnecessary to deal with 'scss' ,
after simplyfing , it was solved
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},What is Plugin ?
- Plugin : javascript library that add function to webpack itself
Plugins can do many things that loaders cannot do
We need 'loaders' to import different files
ex) when we need to import 'css' files > 'css-loader'
What if we want to do other thing instead of importing new type of file
ex) define global constant across whole application ex) minify bundle so it consumes less space on disk
What is bundle ?
Before Dealing with the concept of 'bundle' ,
let's think about 'Why Webpack was born in 1st place'
before using webpack, our html might have look like below
( index.html )
css file1
css file2
css file3
js file1
js file2 > depend on file1
js file3
js file4
...
...
in many project,
we need mulitple css or js files
some of them depend on each other, which means that, in order for 'file2' to work, it should have 'file1' in front of it
above importing process make us easy to make mistakes,
also, it means that,
in order for user to use our application,
they have to import all the above files
To solve, this 'Webpack' was born
'Webpack' gathers all js, css files ,
checking the dependencies among each other,
and make it as 'one single' file
many js files > one js file
that is, Webpack is tool to handle multiple files in one place !
we dont' have to worry about orders anymore !
Again, What is Bundle ?
Bundle, related code package into one single file
it is , final versions of source files
that already undergone the loading, compilation process
Then why do we need to minimize bundle size of our application ?
we want best experienc for customer
we want our applicatino to load fast
by making js file smaller,
1) whole website become loaded fast
2) consume less internet traffic
How ?
1) Terser Plugin : minimize bundle size
const TerserPlugin = require('terser-webpack-plugin');
plugins : [ // 추가적으로 하고 싶은 작업
new TerserPlugin(),
]2)
with common bundling process ,
we usually import css files into js files
we did it using 'css', 'style' loader
but, import all css files into one js file,
is not good for 'production'
using this, all our styles are bundled together with js code inside single file called 'Bundle.js'
along the process, all our css files are loaded on DOM by JS file during run time
Why is this problematic ?
bundle file sometimes become very big ,
needing more time to load the file
to solve this,
extract all our services into sepreate file
that can be generated alongside our js bundle
by this way, we can have 2 js bundles
why is it better ?
- make Js bundle much smaller > faster loading time
- allow us to load several files in parallel , make overall experience even better
HOW ?? ' MinCssExtractPlugin() '
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./dist/styles.css"/>
</head>
<body>
<div id = "root"></div>
<script src = "./dist/app.js" >
</script>
</body>
</html>webpack.config.js
const MinCssExtractPlugin = require('mini-css-extract-plugin');
module : {
test : /\.css$/,
use : [
MinCssExtractPlugin.loader , // 해당 plugin을 쓰는 경우, style-loader 대신에 이걸 써야 한다
// 'style-loader', : 3. apply js to file
// Use Css Modules
'css-loader', // 2. Turns css into js( read css files)
'resolve-url-loader' // 외부 css ex) semantic-ui-css
]
},
{
test: /\.scss$/,
use: [
MinCssExtractPlugin.loader , // 해당 plugin을 쓰는 경우, style-loader 대신에 이걸 써야 한다
// 'style-loader',
'css-loader',
'sass-loader'
]
}
plugins : [ // 추가적으로 하고 싶은 작업
new MinCssExtractPlugin({
filename : 'styles.css',
})
] ,
