Minifiera React med Webpack 4!

28 Jun Minifiera React med Webpack 4!

Har du glömt “minifiera” React innan produktionssättning? Då är du inte ensam. 😉

En god nyhet i Webpack 4 är att det blivit ännu enklare att packa koden i produktion! 😀

Skapa ett projekt och ställ dig i katalogen med kommandot cd

mkdir reactProject
cd reactProject

Skapa package.json:

npm init

Om du vill slippa svara på alla frågor, skriv istället:

npm init -y

Installera webpack som en “dev dependency” och inkludera även webpack-cli för att få tillgång till webpack-kommandon:

npm

npm install webpack webpack-cli --save-dev

yarn

yarn add webpack webpack-cli --dev

Skapa filen index.js i katalogen src . Skriv in koden nedan, som exempel:

console.log("Hello from webpack");

Lägg till raderna i fetstil nedan till package.json:

{
  "name": "reactProject",
  "version": "1.0.0",
  "description": "Test project",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.10"
  }
}

Webpack 4 har två lägen, development och production.
I production är koden minifierad!

Testa att köra:

npm

npm run start

yarn

yarn run start

Kommandot kommer skapa filen main.js i katalogen dist.
Koden är enkel att läsa och inte “minifierad”.

Kör nu istället:

npm run build

yarn run build

Koden i main.js är nu “minifierad” och klar för produktionssättning!

Svårare än så är det inte. 🙂