Proměnné prostředí Webpack:Proměnné prostředí a DevServer

Proměnné prostředí

Při vývoji aplikace musíme rozlišovat mezi produkčním a vývojovým prostředím. Zde se hodí proměnné prostředí. S takovými proměnnými jste se pravděpodobně již dříve setkali, například PATH nebo PORT .

V této části tutoriálu nainstalujeme a nastavíme dotenv a vytvořte jeho soubor prostředí s několika proměnnými.

Instalace závislostí

$ yarn add dotenv -D
  • dotenv: Modul, který načítá proměnné prostředí z .env soubor do process.env .

Konfigurace

$ open webpack.config.js
const  path  =  require('path')
const  HtmlWebPackPlugin  =  require('html-webpack-plugin')
const { CleanWebpackPlugin } =  require('clean-webpack-plugin')

require('dotenv').config()

// Content omitted for better readability
// ...

Vytvořte soubor prostředí

$ touch .env
$ open .env
# Overrides the NODE_ENV and PORT number
NODE_ENV=development
PORT=9000

Zrušit sledování .env (doporučeno)

$ open .gitignore
node_modules
dist
.env

Poskytování souborů z dev serveru

Dosud jsme testovali naši aplikaci tak, že jsme přešli do složky dist a otevřeli soubor index.html z našeho oblíbeného prohlížeče.

Existuje mnohem jednodušší a lepší způsob, jak to udělat:zadejte WebpackDevServer.

Instalace závislostí

$ yarn add webpack-dev-server -D
  • webpack-dev-server: Umožňuje vám poskytovat aplikaci z místního serveru.

Přidat skript pro spuštění serveru

{
  "scripts": {
    "build": "yarn lint && yarn test && webpack",
    "build:watch": "yarn build --watch",
    "test": "yarn lint && yarn jest",
    "test:watch": "jest --watchAll",
    "lint": "standard",
    "start": "webpack-dev-server"
  },
  ...
}
$ yarn start

Konfigurace

WebpackDevServer je vysoce konfigurovatelný. Pokud chcete přepsat její výchozí chování, jako je číslo portu nebo zda se má aplikace zobrazovat na nové kartě prohlížeče, stačí jej zadat v devServer , jako v příkladu níže:

$ open webpack.config.js
// ...
// Content omitted for better readability

/*
    1. Destruct process.env object
    2. Rename PORT to port
    3. Rename NODE_ENV to mode
*/
const {
  PORT: port,
  NODE_ENV: mode
} = process.env

const devServer = {
  port,
  open: true
}

module.exports  = {
    mode,
    devServer,
    // ...
}
$ yarn start

Závěr

V tomto tutoriálu jsme se naučili, jak pracovat s proměnnými prostředí a jak obsluhovat naši aplikaci s dev serverem Webpack.