ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
Check
in English

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯃꯁꯨꯡ ꯋꯦꯕꯄꯦꯛ꯫

ꯋꯦꯕꯄꯦꯛ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯇꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ CSS ꯑꯃꯁꯨꯡ JavaScript ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯌꯥꯑꯣꯍꯅꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯕꯟꯗꯜ ꯇꯧꯒꯅꯤ ꯍꯥꯌꯕꯒꯤ ꯑꯣꯐꯤꯁꯤꯑꯦꯜ ꯒꯥꯏꯗꯂꯥꯏꯅꯁꯤꯡ꯫

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫
ꯑꯔꯣꯏꯕꯥ ꯐꯥꯑꯣꯕꯥ ꯂꯥꯞꯅꯥ ꯆꯠꯄꯥ ꯄꯥꯝꯕꯤꯕꯔꯥ? ꯒꯥꯏꯗꯂꯥꯏꯟ ꯑꯁꯤꯒꯤꯗꯃꯛꯇꯥ ꯁꯣꯔꯁ ꯀꯣꯗ ꯑꯃꯁꯨꯡ ꯋꯥꯔꯀꯤꯡ ꯗꯦꯃꯣ ꯑꯁꯤ twbs/examples ꯔꯤꯄꯣꯖꯤꯇꯔꯤꯗꯒꯤ ꯗꯥꯎꯅꯂꯣꯗ ꯇꯧꯕꯤꯌꯨ . ꯂꯥꯏꯚ ꯑꯦꯗꯤꯇꯤꯡꯒꯤꯗꯃꯛ ꯅꯍꯥꯛꯅꯥ ꯈꯨꯗꯝ ꯑꯁꯤ StackBlitz ꯗꯥ ꯍꯥꯡꯗꯣꯀꯄꯁꯨ ꯌꯥꯏ꯫

ꯁꯦꯝꯒꯡꯄ

ꯑꯩꯈꯣꯌꯅꯥ ꯍꯧꯔꯀꯄꯗꯒꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯋꯦꯕꯄꯦꯛ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯃꯥ ꯁꯦꯃꯒꯠꯂꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯇꯁꯦꯡꯅꯥ ꯍꯧꯗꯣꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯈꯔꯥ ꯑꯃꯁꯨꯡ ꯃꯃꯥꯡꯒꯤ ꯈꯣꯡꯊꯥꯡꯁꯤꯡ ꯂꯩ꯫ ꯒꯥꯏꯗꯂꯥꯏꯟ ꯑꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ Node.js ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯇꯔꯃꯤꯅꯦꯂꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯈꯔꯥ ꯂꯩꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

  1. ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯐꯣꯜꯗꯔ ꯑꯃꯥ ꯁꯦꯝꯃꯨ ꯑꯃꯁꯨꯡ npm ꯁꯦꯠ ꯇꯧ꯫ ꯑꯩꯈꯣꯌꯅꯥ my-projectꯐꯣꯜꯗꯔ ꯑꯗꯨ ꯁꯦꯃꯒꯅꯤ ꯑꯃꯁꯨꯡ -yꯃꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯗꯥ ꯏꯟꯇꯔꯦꯛꯇꯤꯕ ꯋꯥꯍꯪ ꯄꯨꯝꯅꯃꯛ ꯍꯪꯗꯅꯕꯥ ꯑꯥꯔꯒꯨꯃꯦꯟꯇ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ npm ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯒꯅꯤ꯫

    mkdir my-project && cd my-project
npm init -y

  2. ꯋꯦꯕꯄꯦꯛ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯕꯥ꯫ ꯃꯊꯪꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯋꯦꯕꯄꯦꯛ ꯗꯤꯕꯦꯂꯄꯃꯦꯟꯇ ꯗꯤꯄꯦꯟꯗꯦꯟꯁꯁꯤꯡ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ: webpackꯋꯦꯕꯄꯦꯀꯀꯤ ꯀꯣꯔꯒꯤꯗꯃꯛ, webpack-cliꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯇꯔꯃꯤꯅꯦꯂꯗꯒꯤ ꯋꯦꯕꯄꯦꯛ ꯀꯃꯥꯟꯗꯁꯤꯡ ꯆꯠꯄꯥ ꯌꯥꯏ, ꯑꯃꯁꯨꯡ webpack-dev-serverꯃꯔꯝ ꯑꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯂꯣꯀꯦꯜ ꯗꯤꯕꯦꯂꯄꯃꯦꯟꯇ ꯁꯔꯚꯔ ꯑꯃꯥ ꯆꯠꯄꯥ ꯌꯥꯏ꯫ ꯑꯩꯈꯣꯌꯅꯥ --save-devꯁꯤꯒꯅꯦꯜ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ ꯃꯗꯨꯗꯤ ꯗꯤꯄꯦꯟꯗꯦꯟꯁꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯕꯦꯂꯄꯃꯦꯟꯇ ꯁꯤꯖꯤꯟꯅꯅꯕꯒꯤꯗꯃꯛ ꯈꯛꯇꯅꯤ ꯑꯃꯁꯨꯡ ꯄꯨꯊꯣꯀꯄꯒꯤꯗꯃꯛ ꯅꯠꯇꯦ꯫

    npm i --save-dev webpack webpack-cli webpack-dev-server

  3. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧ꯫ ꯍꯧꯖꯤꯛ ꯑꯩꯈꯣꯌꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯔꯦ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ, ꯄꯣꯄꯣꯚꯔꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯣꯌꯒꯤ ꯄꯣꯖꯤꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯃꯁꯤꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯄꯣꯄꯔꯁꯨ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯒꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯊꯧꯔꯥꯡ ꯇꯧꯗ꯭ꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯃꯐꯃꯁꯤꯗꯥ ꯄꯣꯄꯔ ꯑꯁꯤ ꯂꯧꯊꯣꯀꯄꯥ ꯌꯥꯏ꯫

    npm i --save bootstrap @popperjs/core

  4. ꯑꯍꯦꯅꯕꯥ ꯗꯤꯄꯦꯟꯗꯦꯟꯁꯁꯤꯡ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧ꯫ ꯋꯦꯕꯄꯦꯛ ꯑꯃꯁꯨꯡ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯊꯛꯇꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯑꯃꯁꯨꯡ ꯖꯦ.ꯑꯦꯁ.ꯕꯨ ꯋꯦꯕꯄꯦꯀꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯕꯟꯗꯜ ꯇꯧꯅꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯗꯤꯄꯦꯟꯗꯦꯟꯁ ꯈꯔꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯃꯁꯤꯗꯥ ꯁꯥꯁ, ꯂꯣꯗꯔ ꯈꯔꯗꯤ, ꯑꯃꯁꯨꯡ ꯑꯣꯇꯣꯞꯔꯤꯐꯤꯛꯁꯔ ꯌꯥꯑꯣꯔꯤ꯫

    npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader

ꯍꯧꯖꯤꯛꯇꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯗꯤꯄꯦꯟꯗꯦꯟꯁ ꯄꯨꯝꯅꯃꯛ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯔꯦ, ꯑꯩꯈꯣꯌꯅꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯐꯥꯏꯂꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯑꯃꯁꯨꯡ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯒꯤ ꯊꯕꯛ ꯍꯧꯕꯥ ꯉꯝꯂꯦ꯫

ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯁ꯭ꯠꯔꯀꯆꯔ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯍꯥꯟꯅꯅꯥ my-projectꯐꯣꯜꯗꯔ ꯁꯦꯃꯈ꯭ꯔꯦ ꯑꯃꯁꯨꯡ npm ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯈ꯭ꯔꯦ꯫ ꯍꯧꯖꯤꯛ ꯑꯩꯈꯣꯌꯅꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯁ꯭ꯠꯔꯀꯆꯔ ꯑꯁꯤ ꯂꯥꯎꯊꯣꯛꯅꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ srcꯑꯃꯁꯨꯡ ꯐꯣꯜꯗꯔꯁꯤꯡꯁꯨ ꯁꯦꯃꯒꯅꯤ꯫ distꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯗꯒꯤ ꯆꯠꯂꯨ my-project, ꯅꯠꯠꯔꯒꯥ ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯐꯣꯜꯗꯔ ꯑꯃꯁꯨꯡ ꯐꯥꯏꯜ ꯁ꯭ꯠꯔꯀꯆꯔ ꯑꯗꯨ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯝꯃꯨ꯫

mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js

ꯅꯍꯥꯛꯅꯥ ꯇꯧꯕꯥ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ, ꯅꯍꯥꯛꯀꯤ ꯃꯄꯨꯡꯐꯥꯕꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯗꯨ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯒꯨꯝꯅꯥ ꯑꯣꯏꯒꯗꯕꯅꯤ:

my-project/
├── dist/
│   └── index.html
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js

ꯃꯇꯝ ꯑꯁꯤꯗꯥ, ꯄꯨꯝꯅꯃꯛ ꯑꯆꯨꯝꯕꯥ ꯃꯐꯃꯗꯥ ꯂꯩꯔꯤ, ꯑꯗꯨꯕꯨ ꯋꯦꯕꯄꯦꯛ ꯑꯁꯤꯅꯥ ꯊꯕꯛ ꯇꯧꯔꯣꯏ ꯃꯔꯃꯗꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ webpack.config.jsꯍꯧꯖꯤꯛ ꯐꯥꯑꯣꯕꯥ ꯃꯄꯨꯡ ꯐꯥꯍꯅꯗ꯭ꯔꯤ꯫

ꯋꯦꯕꯄꯦꯛ ꯀꯅꯐꯤꯒꯔ ꯇꯧꯕꯥ꯫

ꯗꯤꯄꯦꯟꯗꯦꯟꯁꯁꯤꯡ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯔꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯐꯣꯜꯗꯔ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯀꯣꯗꯤꯡ ꯇꯧꯕꯥ ꯍꯧꯅꯕꯥ ꯁꯦꯝ ꯁꯥꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ, ꯍꯧꯖꯤꯛꯇꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯋꯦꯕꯄꯦꯛ ꯀꯅꯐꯤꯒꯔ ꯇꯧꯕꯥ ꯌꯥꯔꯦ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯁꯤ ꯂꯣꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯆꯠꯄꯥ ꯌꯥꯔꯦ꯫

  1. webpack.config.jsꯅꯍꯥꯛꯀꯤ ꯑꯦꯗꯤꯇꯔꯗꯥ ꯍꯥꯡꯗꯣꯀꯎ꯫ ꯃꯁꯤ ꯕ꯭ꯂꯦꯉ꯭ꯛ ꯑꯣꯏꯕꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯃꯁꯤꯗꯥ ꯕꯣꯏꯂꯔꯞꯂꯦꯠ ꯀꯅꯐꯤꯒ ꯈꯔꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯒꯅꯤ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯔꯚꯔ ꯍꯧꯕꯥ ꯌꯥꯒꯅꯤ꯫ ꯀꯅꯐꯤꯒꯀꯤ ꯁꯔꯨꯛ ꯑꯁꯤꯅꯥ ꯋꯦꯕꯄꯦꯀꯇꯥ ꯍꯥꯌꯔꯤ ꯃꯗꯨꯗꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯀꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯗꯨ ꯌꯦꯡꯒꯗꯕꯅꯤ, ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯀꯣꯗ ꯑꯗꯨ ( )ꯗꯥ ꯀꯗꯥꯏꯗꯥ ꯑꯥꯎꯇꯄꯨꯠ ꯇꯧꯒꯗꯒꯦ, ꯑꯃꯁꯨꯡ ꯗꯤꯚꯦꯂꯄꯃꯦꯟꯇ ꯁꯔꯚꯔ ꯑꯗꯨꯅꯥ ꯀꯔꯝꯅꯥ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯆꯠꯀꯗꯒꯦ ( ꯍꯣꯠ ꯔꯤꯂꯣꯗ ꯇꯧꯔꯕꯥ ꯐꯣꯜꯗꯔ distꯑꯗꯨꯗꯒꯤ ꯄꯨꯊꯣꯀꯄꯥ )꯫dist

    const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  }
}

  2. ꯃꯊꯪꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ dist/index.html. ꯃꯁꯤ HTML ꯄꯦꯖꯅꯤ ꯋꯦꯕꯄꯦꯀꯅꯥ ꯕꯟꯗꯜ ꯇꯧꯔꯕꯥ CSS ꯑꯃꯁꯨꯡ JS ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯗꯥ ꯂꯣꯗ ꯇꯧꯒꯅꯤ ꯃꯗꯨꯗꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯇꯨꯡꯗꯥ ꯈꯣꯡꯊꯥꯡꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯒꯅꯤ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯗꯨ ꯇꯧꯗ꯭ꯔꯤꯉꯩ ꯃꯃꯥꯡꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯁꯤꯗꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯅꯕꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯈꯔꯥ ꯄꯤꯒꯗꯕꯅꯤ ꯑꯃꯁꯨꯡ outputꯃꯃꯥꯡꯒꯤ ꯈꯣꯡꯊꯥꯡꯗꯒꯤ ꯖꯦ.ꯑꯦꯁ.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Webpack</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Webpack!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script src="./main.js"></script>
  </body>
</html>

    ꯑꯩꯈꯣꯌꯅꯥ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯈꯔꯥ ꯌꯥꯑꯣꯔꯤ div class="container"ꯑꯃꯁꯨꯡ <button>ꯃꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯅꯥ ꯋꯦꯕꯄꯦꯀꯅꯥ ꯂꯣꯗ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯎꯕꯥ ꯐꯪꯒꯅꯤ꯫

  3. ꯍꯧꯖꯤꯛ ꯑꯩꯈꯣꯌꯅꯥ ꯋꯦꯕꯄꯦꯛ ꯆꯠꯅꯕꯥ npm ꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯗꯨ ꯍꯥꯡꯗꯣꯀꯎ package.jsonꯑꯃꯁꯨꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ start(ꯅꯍꯥꯛꯅꯥ ꯍꯥꯟꯅꯅꯥ ꯇꯦꯁ꯭ꯠ ꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯗꯨ ꯂꯩꯒꯗꯕꯅꯤ)꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯂꯣꯀꯦꯜ ꯋꯦꯕꯄꯦꯛ ꯗꯦꯚ ꯁꯔꯚꯔ ꯍꯧꯗꯣꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ꯫

    {
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}

  4. ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯗꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯋꯦꯕꯄꯦꯛ ꯍꯧꯕꯥ ꯌꯥꯏ꯫ ꯅꯍꯥꯛꯀꯤ ꯇꯔꯃꯤꯅꯦꯂꯗꯥ ꯂꯩꯕꯥ ꯐꯣꯜꯗꯔ ꯑꯗꯨꯗꯒꯤ my-project, ꯅꯧꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯕꯥ npm ꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯗꯨ ꯔꯟ ꯇꯧ:

    npm start
    ꯋꯦꯕꯄꯦꯛ ꯗꯦꯚ ꯁꯔꯚꯔ ꯆꯠꯂꯤ꯫

ꯒꯥꯏꯗꯂꯥꯏꯟ ꯑꯁꯤꯒꯤ ꯃꯊꯪꯒꯤ ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯥ ꯁꯦꯛꯁꯟ ꯑꯁꯤꯗꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯋꯦꯕꯄꯦꯛ ꯂꯣꯗꯔꯁꯤꯡ ꯁꯦꯠ ꯇꯧꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ CSS ꯑꯃꯁꯨꯡ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄꯨꯝꯅꯃꯛ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯒꯅꯤ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫

ꯋꯦꯕꯄꯦꯀꯇꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯍꯥꯅꯕꯥ ꯁꯦꯛꯁꯟꯗꯥ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯈꯤꯕꯥ ꯂꯣꯗꯔꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ npmꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯈ꯭ꯔꯦ, ꯑꯗꯨꯕꯨ ꯍꯧꯖꯤꯛꯇꯤ ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯋꯦꯕꯄꯦꯛ ꯑꯁꯤ ꯀꯅꯐꯤꯒꯔ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

  1. ꯂꯣꯗꯔꯁꯤꯡ ꯑꯁꯤ webpack.config.js. ꯅꯍꯥꯛꯀꯤ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ ꯐꯥꯏꯜ ꯑꯗꯨ ꯍꯧꯖꯤꯛ ꯃꯄꯨꯡ ꯐꯥꯔꯦ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯁꯤꯒꯥ ꯃꯥꯟꯅꯒꯗꯕꯅꯤ꯫ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯑꯃꯠꯇꯥ ꯉꯥꯏꯔꯕꯥ ꯑꯅꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯁꯤ moduleꯁꯦꯛꯁꯟ ꯑꯁꯤꯅꯤ꯫

    const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require('autoprefixer')
                ]
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

    ꯑꯩꯈꯣꯌꯅꯥ ꯀꯔꯤꯒꯤꯗꯃꯛꯇꯥ ꯂꯣꯗꯔ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯃꯊꯧ ꯇꯥꯔꯤꯕꯅꯣ ꯍꯥꯌꯕꯒꯤ ꯔꯤꯀꯦꯞ ꯑꯃꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ꯫ HTML ꯄꯦꯖꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ style-loaderCSS ꯏꯅꯖꯦꯛꯇ ꯇꯧꯏ , ꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯏ , ꯑꯣꯇꯣꯞꯔꯤꯐꯤꯛꯁꯔꯒꯤꯗꯃꯛꯇꯥ ꯃꯊꯧ ꯇꯥꯏ, ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯗꯥ ꯁꯥꯁ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫<style><head>css-loader@importurl()postcss-loadersass-loader

  2. ꯍꯧꯖꯤꯛ, ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. src/scss/styles.scssꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯣꯔꯁ ꯁꯥꯁ ꯄꯨꯝꯅꯃꯛ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯅꯕꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

    // Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

    ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯄꯥꯝꯂꯕꯗꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠꯁꯤꯡ ꯑꯁꯤ ꯑꯃꯃꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯁꯨ ꯌꯥꯒꯅꯤ꯫ ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯒꯤꯗꯃꯛ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯥꯁ ꯏꯝꯄꯣꯔꯠ ꯗꯣꯀꯁꯤꯡ ꯄꯥꯕꯤꯌꯨ꯫

  3. ꯃꯊꯪꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ CSS ꯂꯣꯗ ꯇꯧꯏ ꯑꯃꯁꯨꯡ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯏ꯫ src/js/main.jsCSS ꯂꯣꯗ ꯇꯧꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ JS ꯄꯨꯝꯅꯃꯛ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯅꯕꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯄꯣꯄꯔ ꯑꯁꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯒꯅꯤ꯫

    // Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

    ꯕꯟꯗꯜ ꯁꯥꯏꯖꯁꯤꯡ ꯍꯟꯊꯍꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡ ꯑꯃꯃꯝ ꯑꯣꯏꯅꯥ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯁꯨ ꯌꯥꯏ:

    import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'

    ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯄꯥꯕꯤꯌꯨ꯫

  4. ꯑꯃꯁꯨꯡ ꯅꯈꯣꯌꯅꯥ ꯇꯧꯔꯦ! 🎉 ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯣꯔꯁ ꯁꯥꯁ ꯑꯃꯁꯨꯡ ꯖꯦ.ꯑꯦꯁ.ꯅꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯂꯣꯗ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ, ꯅꯍꯥꯛꯀꯤ ꯂꯣꯀꯦꯜ ꯗꯤꯚꯦꯂꯄꯃꯦꯟꯇ ꯁꯔꯚꯔ ꯑꯗꯨ ꯍꯧꯖꯤꯛ ꯑꯁꯤꯒꯨꯝꯅꯥ ꯑꯣꯏꯒꯗꯕꯅꯤ꯫

    ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯆꯠꯂꯤꯕꯥ ꯋꯦꯕꯄꯦꯛ ꯗꯦꯚ ꯁꯔꯚꯔ꯫

    ꯍꯧꯖꯤꯛꯇꯤ ꯅꯍꯥꯛꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯄꯥꯝꯂꯤꯕꯥ Bootstrap ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯍꯧꯕꯥ ꯌꯥꯔꯦ꯫ ꯑꯍꯦꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯁꯥꯁ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯌꯥꯑꯣꯍꯅꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯔꯤꯕꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ CSS ꯑꯃꯁꯨꯡ JSꯒꯤ ꯁꯔꯨꯛ ꯈꯛꯇꯃꯛ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯕꯤꯜꯗ ꯑꯗꯨ ꯑꯣꯞꯇꯤꯃꯥꯏꯖ ꯇꯧꯒꯅꯤ ꯍꯥꯌꯕꯒꯤ ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯋꯦꯕꯄꯦꯛ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯗꯨ ꯁꯣꯌꯗꯅꯥ ꯆꯦꯛ ꯇꯧꯕꯤꯌꯨ꯫

ꯄ꯭ꯔꯗꯛꯁꯟ ꯑꯣꯞꯇꯤꯃꯥꯏꯖꯦꯁꯅꯁꯤꯡ꯫

ꯅꯍꯥꯛꯀꯤ ꯁꯦꯇꯑꯄꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯁꯤ ꯄꯨꯊꯣꯀꯄꯗꯥ ꯆꯂꯥꯏꯕꯗꯥ ꯀꯥꯟꯅꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯁꯦꯛꯌꯨꯔꯤꯇꯤ ꯑꯃꯁꯨꯡ ꯁ꯭ꯄꯤꯗ ꯑꯣꯞꯇꯤꯃꯥꯏꯖꯦꯁꯟ ꯈꯔꯥ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯕꯁꯨ ꯌꯥꯏ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯑꯣꯞꯇꯤꯃꯥꯏꯖꯦꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯋꯦꯕꯄꯦꯛ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯇꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯗꯦ ꯑꯃꯁꯨꯡ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯔꯤ ꯍꯥꯌꯕꯥ ꯈꯉꯕꯤꯌꯨ꯫

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯁꯤꯡ ꯂꯧꯊꯣꯀꯄꯥ꯫

ꯃꯊꯛꯇꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯀꯅꯐꯤꯒꯔ ꯇꯧꯈꯤꯕꯥ ꯑꯁꯤꯅꯥ style-loaderꯈꯨꯗꯣꯡꯆꯥꯕꯥ ꯂꯧꯗꯨꯅꯥ ꯕꯟꯗꯂꯗꯥ CSS ꯏꯃꯤꯠ ꯇꯧꯏ ꯃꯔꯝ ꯑꯗꯨꯅꯥ CSS ꯐꯥꯏꯜ ꯑꯃꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯂꯣꯗ ꯇꯧꯕꯥ dist/index.htmlꯃꯊꯧ ꯇꯥꯗꯦ꯫ ꯃꯁꯤꯒꯤ ꯑꯦꯞꯔꯣꯆ ꯑꯁꯤꯅꯥ ꯑꯀꯅꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯁꯦꯛꯌꯨꯔꯤꯇꯤ ꯄꯣꯂꯤꯁꯤ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯥ ꯉꯃꯗꯕꯥ ꯌꯥꯏ, ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯑꯆꯧꯕꯥ ꯕꯟꯗꯜ ꯁꯥꯏꯖ ꯑꯁꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯑꯦꯞꯂꯤꯀꯦꯁꯅꯗꯥ ꯕꯣꯇꯂꯅꯦꯛ ꯑꯃꯥ ꯑꯣꯏꯔꯀꯄꯥ ꯌꯥꯏ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯃꯁꯤꯗꯒꯤ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯂꯣꯗ ꯇꯧꯕꯥ ꯌꯥꯅꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯕꯨ ꯇꯣꯉꯥꯟꯅꯥ ꯊꯝꯅꯕꯥ dist/index.html, mini-css-extract-loaderꯋꯦꯕꯄꯦꯛ ꯄ꯭ꯂꯒꯏꯟ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯑꯍꯥꯅꯕꯗꯥ, ꯄ꯭ꯂꯒꯏꯟ ꯑꯗꯨ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯔꯣ:

npm install --save-dev mini-css-extract-plugin

ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯋꯦꯕꯄꯦꯛ ꯀꯅꯐꯤꯒꯔꯦꯁꯟꯗꯥ ꯄ꯭ꯂꯒꯏꯟ ꯑꯗꯨ ꯏꯟꯁꯇꯦꯟꯁ ꯇꯧ ꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯧ:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')
 
 module.exports = {
   mode: 'development',
   entry: './src/js/main.js',
+  plugins: [new miniCssExtractPlugin()],
   output: {
     filename: "main.js",
     path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,8 @@ module.exports = {
         test: /\.(scss)$/,
         use: [
           {
-            // Adds CSS to the DOM by injecting a `<style>` tag
-            loader: 'style-loader'
+            // Extracts CSS for each JS file that includes CSS
+            loader: miniCssExtractPlugin.loader
           },
           {

ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯆꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ npm run build, ꯑꯅꯧꯕꯥ ꯐꯥꯏꯜ ꯑꯃꯥ ꯂꯩꯒꯅꯤ dist/main.css, ꯃꯁꯤꯗꯥ src/js/main.js. ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ dist/index.htmlꯍꯧꯖꯤꯛ ꯅꯍꯥꯛꯀꯤ ꯕ꯭ꯔꯥꯎꯖꯔꯗꯥ ꯌꯦꯡꯂꯕꯗꯤ, ꯁ꯭ꯇꯥꯏꯜ ꯑꯗꯨ ꯃꯥꯡꯈꯤꯒꯅꯤ, ꯃꯔꯃꯗꯤ ꯍꯧꯖꯤꯛ dist/main.css. ꯅꯍꯥꯛꯅꯥ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯔꯕꯥ CSS ꯑꯗꯨ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯗꯥ ꯌꯥꯎꯍꯅꯕꯥ ꯌꯥꯏ dist/index.html:

--- a/webpack/dist/index.html
+++ b/webpack/dist/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./main.css">
     <title>Bootstrap w/ Webpack</title>
   </head>
   <body>

SVG ꯐꯥꯏꯂꯁꯤꯡ ꯂꯧꯊꯣꯀꯄꯥ꯫

data:ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ CSSꯗꯥ ꯏꯅꯂꯥꯏꯟ URIꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ SVG ꯐꯥꯏꯂꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯔꯤꯐꯔꯦꯟꯁꯁꯤꯡ ꯌꯥꯎꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ data:ꯏꯃꯦꯖꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ URIꯁꯤꯡ ꯕ꯭ꯂꯣꯛ ꯇꯧꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯀꯤꯗꯃꯛꯇꯥ ꯀꯟꯇꯦꯟꯇ ꯁꯦꯛꯌꯨꯔꯤꯇꯤ ꯄꯣꯂꯤꯁꯤ ꯑꯃꯥ ꯁꯦꯝꯂꯕꯗꯤ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ SVG ꯐꯥꯏꯂꯁꯤꯡ ꯑꯁꯤ ꯂꯣꯗ ꯇꯧꯔꯣꯏ꯫ ꯋꯦꯕꯄꯦꯀꯀꯤ ꯑꯦꯁꯦꯠ ꯃꯣꯗ꯭ꯌꯨꯂꯁꯤꯡꯒꯤ ꯐꯤꯆꯔ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯏꯅꯂꯥꯏꯟ SVG ꯐꯥꯏꯂꯁꯤꯡ ꯑꯦꯛꯁꯠꯔꯥꯛꯇ ꯇꯧꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯁꯃꯁ꯭ꯌꯥ ꯑꯁꯤ ꯀꯣꯀꯍꯅꯕꯥ ꯌꯥꯏ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯨꯝꯅꯥ ꯏꯅꯂꯥꯏꯟ SVG ꯐꯥꯏꯂꯁꯤꯡ ꯑꯦꯛꯁꯠꯔꯥꯛꯇ ꯇꯧꯅꯕꯥ ꯋꯦꯕꯄꯦꯛ ꯀꯅꯐꯤꯒꯔ ꯇꯧ:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,14 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        mimetype: 'image/svg+xml',
+        scheme: 'data',
+        type: 'asset/resource',
+        generator: {
+          filename: 'icons/[hash].svg'
+        }
+      },
       {
         test: /\.(scss)$/,
         use: [

ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯆꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ npm run build, ꯅꯍꯥꯛꯅꯥ SVG ꯐꯥꯏꯂꯁꯤꯡ dist/iconsꯑꯗꯨ CSSꯗꯥ ꯑꯦꯛꯁꯠꯔꯥꯛꯇ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯗꯒꯤ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯔꯤꯐꯔꯦꯟꯁ ꯇꯧꯕꯥ ꯎꯒꯅꯤ꯫

ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯔꯥꯅꯕꯥ ꯅꯠꯔꯒꯥ ꯃꯇꯝ ꯂꯣꯏꯔꯕꯥ ꯋꯥꯐꯝ ꯑꯃꯥ ꯎꯕꯥ ꯐꯪꯂꯤꯕꯔꯥ? ꯆꯥꯅꯕꯤꯗꯨꯅꯥ GitHub ꯗꯥ ꯏꯁꯨ ꯑꯃꯥ ꯍꯥꯡꯗꯣꯀꯄꯤꯌꯨ . ꯇ꯭ꯔꯕꯂꯁꯨꯠ ꯇꯧꯕꯗꯥ ꯃꯇꯦꯡ ꯃꯊꯧ ꯇꯥꯕ꯭ꯔꯥ? GitHub ꯗꯥ ꯁꯥꯔꯆ ꯇꯧꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯈꯟꯅ-ꯅꯩꯅꯕꯥ ꯑꯃꯥ ꯍꯧꯕꯥ꯫