Webpack

Настройка Webpack для Ρ€Π°Π±ΠΎΡ‚Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с js

ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ webpack для сборки Node.js ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ webpack.

  1. УстановитС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹:

    npm install --save-dev webpack webpack-cli webpack-node-externals
  2. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» webpack.config.js:

    const path = require('path');
    const nodeExternals = require('webpack-node-externals');
    
    module.exports = {
      entry: './src/index.js', // Π’Π°Ρˆ основной Ρ„Π°ΠΉΠ» ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°
      target: 'node',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
      },
      externals: [nodeExternals()], // Π˜ΡΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ node_modules ΠΈΠ· Π±Π°Π½Π΄Π»Π°
      mode: 'production',
    };
  3. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ скрипт сборки Π² package.json:

    "scripts": {
      "build": "webpack --config webpack.config.js"
    }
  4. Π‘ΠΎΠ±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚:

    npm run build

Π€Π°ΠΉΠ» dist/bundle.js Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ваш ΠΊΠΎΠ΄ ΠΈ всС зависимости, ΠΊΡ€ΠΎΠΌΠ΅ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Node.js, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ fs, path ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ внСшними.

Если Π·Π°ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ externals: [nodeExternals()], Ρ‚ΠΎ сборка Π±ΡƒΠ΄Π΅Ρ‚ production - Ρ‚.Π΅. Π±Π΅Π· зависимости ΠΎΡ‚ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Node.js

Настройка Webpack для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с html

Last updated