பூட்ஸ்ட்ராப் & வெப்பேக்

Webpack ஐப் பயன்படுத்தி உங்கள் திட்டத்தில் பூட்ஸ்டார்ப்பின் CSS மற்றும் ஜாவாஸ்கிரிப்டை எவ்வாறு சேர்ப்பது மற்றும் தொகுப்பது என்பதற்கான அதிகாரப்பூர்வ வழிகாட்டி.

இந்தப் பக்கத்தில்

இறுதிவரை தவிர்க்க வேண்டுமா? இந்த வழிகாட்டிக்கான மூலக் குறியீடு மற்றும் வேலை செய்யும் டெமோவை twbs/examples களஞ்சியத்திலிருந்து பதிவிறக்கவும் . லைவ் எடிட்டிங்கிற்காக ஸ்டாக்பிளிட்ஸில் உதாரணத்தையும் திறக்கலாம் .

அமைவு

நாங்கள் புதிதாக பூட்ஸ்டார்ப் மூலம் Webpack திட்டத்தை உருவாக்கி வருகிறோம், எனவே நாம் உண்மையில் தொடங்குவதற்கு முன் சில முன்நிபந்தனைகள் மற்றும் முன் படிகள் உள்ளன. இந்த வழிகாட்டிக்கு நீங்கள் Node.js நிறுவப்பட்டிருக்க வேண்டும் மற்றும் முனையத்துடன் சில பரிச்சயம் தேவை.

திட்ட கோப்புறையை உருவாக்கி npm ஐ அமைக்கவும். நாங்கள் கோப்புறையை உருவாக்கி, எல்லா ஊடாடும் கேள்விகளையும் எங்களிடம் கேட்பதைத் தவிர்க்க my-project, வாதத்துடன் npm ஐ துவக்குவோம் .-y
```
mkdir my-project && cd my-project
npm init -y
```
Webpack ஐ நிறுவவும். அடுத்து நாம் நமது Webpack டெவலப்மென்ட் சார்புகளை நிறுவ வேண்டும்: webpackWebpack இன் மையத்திற்கு, webpack-cliநாம் டெர்மினலில் இருந்து Webpack கட்டளைகளை இயக்கலாம், webpack-dev-serverஎனவே நாம் ஒரு உள்ளூர் மேம்பாட்டு சேவையகத்தை இயக்கலாம். --save-devஇந்த சார்புகள் வளர்ச்சிப் பயன்பாட்டிற்காக மட்டுமே உள்ளன, உற்பத்திக்காக அல்ல என்பதை நாங்கள் சமிக்ஞை செய்கிறோம் .
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
பூட்ஸ்டார்ப் நிறுவவும். இப்போது நாம் பூட்ஸ்டார்ப்பை நிறுவலாம். பாப்பரை நிறுவுவோம், ஏனெனில் எங்களின் டிராப் டவுன்கள், பாப்ஓவர்கள் மற்றும் டூல்டிப்கள் அவற்றின் நிலைப்படுத்தலைப் பொறுத்தது. அந்த கூறுகளைப் பயன்படுத்த நீங்கள் திட்டமிடவில்லை என்றால், நீங்கள் பாப்பரை இங்கே தவிர்க்கலாம்.
```
npm i --save bootstrap @popperjs/core
```
கூடுதல் சார்புகளை நிறுவவும். Webpack மற்றும் Bootstrap ஐத் தவிர, Webpack உடன் Bootstrap இன் CSS மற்றும் JS ஐ சரியாக இறக்குமதி செய்து தொகுக்க இன்னும் சில சார்புகள் தேவை. இதில் சாஸ், சில லோடர்கள் மற்றும் ஆட்டோபிரிஃபிக்சர் ஆகியவை அடங்கும்.
```
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 ஐ உள்ளமைத்து எங்கள் திட்டத்தை உள்நாட்டில் இயக்கலாம்.

உங்கள் எடிட்டரில் திறக்கவும் webpack.config.js. இது காலியாக இருப்பதால், அதில் சில கொதிகலன் கட்டமைப்பைச் சேர்க்க வேண்டும், எனவே எங்கள் சேவையகத்தைத் தொடங்கலாம். கட்டமைப்பின் இந்தப் பகுதியானது Webpack க்கு எங்கள் திட்டத்தின் ஜாவாஸ்கிரிப்ட், தொகுக்கப்பட்ட குறியீட்டை ( 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 ஐப் பயன்படுத்த, உலாவியில் Webpack ஏற்றப்படும் 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>
```
நாங்கள் பூட்ஸ்டார்ப் ஸ்டைலிங்கின் சிறிதளவு இங்கே சேர்த்துள்ளோம், div class="container"இதனால் <button>பூட்ஸ்டார்ப்பின் CSS Webpack மூலம் ஏற்றப்படும் போது பார்க்கலாம்.
Webpack ஐ இயக்க இப்போது நமக்கு npm ஸ்கிரிப்ட் தேவை. கீழே காட்டப்பட்டுள்ள ஸ்கிரிப்டைத் திறந்து package.jsonசேர்க்கவும் start(உங்களிடம் ஏற்கனவே சோதனை ஸ்கிரிப்ட் இருக்க வேண்டும்). எங்கள் உள்ளூர் Webpack dev சேவையகத்தைத் தொடங்க இந்த ஸ்கிரிப்டைப் பயன்படுத்துவோம்.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
இறுதியாக, நாம் Webpack ஐ ஆரம்பிக்கலாம். உங்கள் டெர்மினலில் உள்ள my-projectகோப்புறையிலிருந்து, புதிதாக சேர்க்கப்பட்ட npm ஸ்கிரிப்டை இயக்கவும்:
```
npm start
```

இந்த வழிகாட்டியின் அடுத்த மற்றும் இறுதிப் பிரிவில், Webpack ஏற்றிகளை அமைத்து, பூட்ஸ்டார்ப்பின் CSS மற்றும் JavaScript அனைத்தையும் இறக்குமதி செய்வோம்.

பூட்ஸ்ட்ராப் இறக்குமதி

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'
          }
        ]
      }
    ]
  }
}

இந்த லோடர்கள் நமக்கு ஏன் தேவை என்பதற்கான ரீகேப் இங்கே உள்ளது. HTML பக்கத்தின் style-loaderஒரு <style>உறுப்பில் CSS ஐ உட்செலுத்துகிறது, பயன்படுத்த உதவுகிறது மற்றும் , Autoprefixer க்கு தேவைப்படுகிறது, மேலும் Sass ஐப் பயன்படுத்த அனுமதிக்கிறது.<head>css-loader@importurl()postcss-loadersass-loader

இப்போது, பூட்ஸ்டார்ப்பின் CSS ஐ இறக்குமதி செய்வோம். src/scss/styles.scssபூட்ஸ்டார்ப்பின் அனைத்து மூல சாஸ்களையும் இறக்குமதி செய்ய பின்வருவனவற்றைச் சேர்க்கவும் .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
நீங்கள் விரும்பினால் எங்கள் ஸ்டைல்ஷீட்களை தனித்தனியாக இறக்குமதி செய்யலாம். விவரங்களுக்கு எங்கள் சாஸ் இறக்குமதி ஆவணத்தைப் படிக்கவும் .
அடுத்து நாம் 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'
```
பூட்ஸ்டார்ப்பின் செருகுநிரல்களை எவ்வாறு பயன்படுத்துவது என்பது பற்றிய கூடுதல் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் டாக்ஸைப் படிக்கவும் .
நீங்கள் முடித்துவிட்டீர்கள்! 🎉 பூட்ஸ்டார்ப்பின் மூல Sass மற்றும் JS முழுமையாக ஏற்றப்பட்ட நிலையில், உங்கள் உள்ளூர் மேம்பாட்டு சேவையகம் இப்போது இப்படி இருக்க வேண்டும்.

இப்போது நீங்கள் பயன்படுத்த விரும்பும் பூட்ஸ்டார்ப் கூறுகளைச் சேர்க்கலாம். கூடுதல் தனிப்பயன் சாஸை எவ்வாறு சேர்ப்பது மற்றும் உங்களுக்குத் தேவையான பூட்ஸ்டார்ப்பின் CSS மற்றும் JS பகுதிகளை மட்டும் இறக்குமதி செய்வதன் மூலம் உங்கள் கட்டமைப்பை மேம்படுத்துவது எப்படி என்பதற்கான முழுமையான Webpack உதாரணத் திட்டத்தைப் பார்க்கவும் .

உற்பத்தி மேம்படுத்தல்கள்

உங்கள் அமைப்பைப் பொறுத்து, தயாரிப்பில் திட்டத்தை இயக்குவதற்குப் பயனுள்ள சில கூடுதல் பாதுகாப்பு மற்றும் வேக மேம்படுத்தல்களை நீங்கள் செயல்படுத்த விரும்பலாம். இந்த மேம்படுத்தல்கள் Webpack உதாரணத் திட்டத்தில் பயன்படுத்தப்படாது மற்றும் செயல்படுத்துவது உங்களுடையது என்பதை நினைவில் கொள்ளவும்.

CSS பிரித்தெடுக்கிறது

மேலே style-loaderஉள்ளமைக்கப்பட்டவை CSSஐ மூட்டைக்குள் வசதியாக வெளியிடுவதால், CSS கோப்பை கைமுறையாக ஏற்றுவது dist/index.htmlஅவசியமில்லை. இந்த அணுகுமுறை கடுமையான உள்ளடக்கப் பாதுகாப்புக் கொள்கையுடன் வேலை செய்யாமல் போகலாம், மேலும் இது பெரிய மூட்டையின் அளவு காரணமாக உங்கள் பயன்பாட்டில் தடையாக இருக்கலாம்.

CSS ஐப் பிரிக்க, நாம் அதை நேரடியாக ஏற்ற முடியும் dist/index.html, mini-css-extract-loaderWebpack செருகுநிரலைப் பயன்படுத்தவும்.

முதலில், செருகுநிரலை நிறுவவும்:

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

மீண்டும் இயக்கிய பிறகு npm run build, ஒரு புதிய கோப்பு இருக்கும் dist/main.css, அதில் இறக்குமதி செய்யப்பட்ட அனைத்து 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 கோப்புகளுக்கான பல குறிப்புகளை உள்ளடக்கியது . படங்களுக்கான URIகளைத் தடுக்கும் உங்கள் திட்டத்திற்கான உள்ளடக்கப் பாதுகாப்புக் கொள்கையை நீங்கள் வரையறுத்தால் data:, இந்த 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: [

மீண்டும் இயக்கிய பிறகு , SVG கோப்புகள் பிரித்தெடுக்கப்பட்டு CSS இலிருந்து சரியாகக் குறிப்பிடப்பட்டிருப்பதைக் npm run buildகாண்பீர்கள் .dist/icons

இங்கே ஏதேனும் தவறு அல்லது காலாவதியானதா? GitHub இல் சிக்கலைத் திறக்கவும் . சிக்கலைத் தீர்க்க உதவி தேவையா? GitHub இல் தேடவும் அல்லது விவாதத்தைத் தொடங்கவும் .