부트스트랩 및 웹팩

Webpack을 사용하여 프로젝트에 Bootstrap의 CSS 및 JavaScript를 포함하고 번들하는 방법에 대한 공식 가이드입니다.

이 페이지에서

끝까지 건너뛰고 싶으신가요? twbs/examples 리포지토리 에서 이 가이드의 소스 코드와 작업 데모를 다운로드하세요 . 실시간 편집을 위해 StackBlitz에서 예제를 열 수도 있습니다 .

설정

Bootstrap을 사용하여 Webpack 프로젝트를 처음부터 구축 중이므로 실제로 시작하기 전에 몇 가지 전제 조건과 선행 단계가 있습니다. 이 가이드를 사용하려면 Node.js가 설치되어 있고 터미널에 대해 어느 정도 익숙해야 합니다.

프로젝트 폴더를 만들고 npm을 설정합니다. 폴더를 만들고 모든 대화형 질문을 하지 않도록 인수로 my-projectnpm을 초기화합니다 .-y
```
mkdir my-project && cd my-project
npm init -y
```
웹팩을 설치합니다. 다음으로 Webpack 개발 종속성을 설치해야 합니다. Webpack webpack의 핵심을 webpack-cli위해 터미널에서 Webpack 명령을 webpack-dev-server실행하고 로컬 개발 서버를 실행할 수 있습니다. 우리는 --save-dev이러한 종속성이 프로덕션용이 아니라 개발용으로만 사용된다는 신호를 사용합니다.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
부트스트랩을 설치합니다. 이제 부트스트랩을 설치할 수 있습니다. 드롭다운, 팝오버 및 툴팁이 위치 지정에 따라 달라지므로 Popper도 설치할 것입니다. 이러한 구성 요소를 사용할 계획이 없다면 여기에서 Popper를 생략할 수 있습니다.
```
npm i --save bootstrap @popperjs/core
```
추가 종속성을 설치합니다. Webpack 및 Bootstrap 외에도 Bootstrap의 CSS 및 JS를 Webpack과 함께 적절하게 가져오고 번들로 묶으려면 몇 가지 종속성이 더 필요합니다. 여기에는 Sass, 일부 로더 및 Autoprefixer가 포함됩니다.
```
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이 작동하지 않습니다 webpack.config.js.

웹팩 구성

종속성이 설치되고 프로젝트 폴더가 코딩을 시작할 준비가 되었으면 이제 Webpack을 구성하고 프로젝트를 로컬에서 실행할 수 있습니다.

webpack.config.js편집기에서 엽니 다. 비어 있으므로 서버를 시작할 수 있도록 상용구 구성을 추가해야 합니다. 구성의 이 부분은 Webpack이 프로젝트의 JavaScript를 찾고 컴파일된 코드를 ( 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
  }
}
```
다음으로 우리는 우리의 dist/index.html. 이것은 웹팩이 브라우저에 로드하여 번들된 CSS와 JS를 활용하는 HTML 페이지이며 이후 단계에서 추가할 것입니다. output그렇게 하기 전에 이전 단계의 JS 를 렌더링하고 포함할 무언가를 제공해야 합니다 .
```
<!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>
```
부트스트랩의 CSS가 Webpack에 의해 로드되는 시점을 볼 수 있도록 여기 div class="container"에 약간의 부트스트랩 스타일을 포함하고 있습니다.<button>
이제 Webpack을 실행하려면 npm 스크립트가 필요합니다. 아래에 표시된 스크립트를 열고 package.json추가합니다 start(이미 테스트 스크립트가 있어야 함). 이 스크립트를 사용하여 로컬 Webpack 개발 서버를 시작합니다.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
마지막으로 Webpack을 시작할 수 있습니다. my-project터미널 의 폴더에서 새로 추가된 npm 스크립트를 실행합니다.
```
npm start
```

이 가이드의 다음이자 마지막 섹션에서는 Webpack 로더를 설정하고 Bootstrap의 모든 CSS 및 JavaScript를 가져옵니다.

부트스트랩 가져오기

Bootstrap을 Webpack으로 가져오려면 첫 번째 섹션에서 설치한 로더가 필요합니다. npm으로 설치했지만 이제 Webpack을 사용하도록 구성해야 합니다.

에서 로더를 설정합니다 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'
          }
        ]
      }
    ]
  }
}

다음은 이 모든 로더가 필요한 이유를 요약한 것입니다. style-loaderCSS를 HTML 페이지의 <style>요소에 삽입하고, Autoprefixer에 필요한 및 , Sass를 사용할 수 있도록 도와줍니다 .<head>css-loader@importurl()postcss-loadersass-loader

이제 부트스트랩의 CSS를 가져오겠습니다. 다음을 추가하여 src/scss/styles.scssBootstrap의 소스 Sass를 모두 가져옵니다.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
원하는 경우 스타일시트를 개별적으로 가져올 수도 있습니다. 자세한 내용은 Sass 가져오기 문서 를 참조하세요.
다음으로 CSS를 로드하고 Bootstrap의 JavaScript를 가져옵니다. src/js/main.jsCSS를 로드하고 모든 Bootstrap의 JS를 가져오려면 에 다음을 추가하십시오 . Popper는 Bootstrap을 통해 자동으로 가져옵니다.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
번들 크기를 줄이기 위해 필요에 따라 JavaScript 플러그인을 개별적으로 가져올 수도 있습니다.
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bootstrap의 플러그인을 사용하는 방법에 대한 자세한 내용은 JavaScript 문서 를 참조하십시오.
그리고 당신은 끝났습니다! 🎉 Bootstrap의 소스 Sass와 JS가 완전히 로드되면 로컬 개발 서버가 다음과 같이 보일 것입니다.

이제 사용하려는 부트스트랩 구성 요소를 추가할 수 있습니다. 추가 사용자 지정 Sass를 포함하고 필요한 Bootstrap의 CSS 및 JS 부분만 가져와서 빌드를 최적화하는 방법에 대해서는 전체 Webpack 예제 프로젝트를 확인 하십시오 .

생산 최적화

설정에 따라 프로덕션 환경에서 프로젝트를 실행하는 데 유용한 몇 가지 추가 보안 및 속도 최적화를 구현할 수 있습니다. 이러한 최적화는 Webpack 예제 프로젝트 에 적용되지 않으며 사용자가 구현해야 합니다.

CSS 추출

위에서 style-loader구성한 것은 CSS 파일을 수동으로 로드할 dist/index.html필요가 없도록 CSS를 번들로 편리하게 내보냅니다. 그러나 이 접근 방식은 엄격한 콘텐츠 보안 정책에서는 작동하지 않을 수 있으며 큰 번들 크기로 인해 애플리케이션에 병목 현상이 발생할 수 있습니다.

에서 직접 로드할 수 있도록 CSS를 분리하려면 Webpack 플러그인 dist/index.html을 사용하세요 .mini-css-extract-loader

먼저 플러그인을 설치합니다.

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

그런 다음 Webpack 구성에서 플러그인을 인스턴스화하고 사용합니다.

--- 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
           },
           {

다시 실행 하면 에서 가져온 모든 CSS를 포함 npm run build하는 새 파일 이 생성됩니다 . 지금 브라우저에서 보는 경우 스타일은 현재 에서와 같이 누락됩니다 . 다음과 같이 생성된 CSS를 포함할 수 있습니다 .dist/main.csssrc/js/main.jsdist/index.htmldist/main.cssdist/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:Bootstrap의 CSS에는 인라인 URI 를 통해 SVG 파일에 대한 여러 참조가 포함되어 있습니다 . data:이미지에 대한 URI를 차단하는 콘텐츠 보안 정책을 프로젝트에 정의하면 이러한 SVG 파일이 로드되지 않습니다. Webpack의 자산 모듈 기능을 사용하여 인라인 SVG 파일을 추출하여 이 문제를 해결할 수 있습니다.

다음과 같이 인라인 SVG 파일을 추출하도록 Webpack을 구성합니다.

--- 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: [

다시 실행 하면 CSS로 추출되고 CSS에서 적절하게 참조되는 npm run buildSVG 파일을 찾을 수 있습니다 .dist/icons

여기에 잘못된 것이 있거나 오래된 것이 있습니까? GitHub에서 문제를 여 십시오 . 문제 해결에 도움이 필요하십니까? GitHub에서 검색하거나 토론을 시작하세요 .