CURSO JAVASCRIPT REAL (NPM, WEBPACK, ES6)

https://academy.especializati.com.br/curso/javascript-real-npm-webpack-es6

APRENDA A TRABALHAR COM CONCEITOS MODERNOS E AVANÇADOS DO JAVASCRIPT, NESSE CURSO PASSO A PASSO. APRENDA WEBPACK, ES6, NPM E MUITO MAIS.

Índice

1. Organização do Projeto
2. Gerenciar Módulos
3. Webpack

---

1 - Organização do Projeto

01 - Ferramentas Curso JavaScript Moderno

• NODE

02 - Iniciar Projeto JavaScript com NPM

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "Curso Js Moderno",
  "main": "src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "José Malcher Jr.",
  "license": "ISC"
}

Voltar ao Índice

---

2 - Gerenciar Módulos

03 - Baixar Dependências de Desenvolvimento JavaScript

-npm i webpack webpack-cli --save-dev

04 - Baixar Dependências JavaScript com NPM

• npm i package

05 - Instalar Módulos Globalmente com NPM

• npm -g modulo

06 - Padrão CommonJS JavaScript

console.log("TESTANDO OUTEHER.js");

module.exports = 123;

const outherJS = require('./outher');

console.log(`Imprimindo de OutherJS ${outherJS}`);

07 - Remover Módulo com NPM

• npm update
• npm unistall axios

Voltar ao Índice

---

3 - Webpack

08 - Apresentação do Webpack

• https://webpack.js.org/

09 - Webpack entry e output

• webpack/webpack.config.js

const path = require('path');

module.exports = {
    entry: "./src/main.js",
    output:{
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    mode: "development"
}

10 - ES6 com Webpack

"scripts": {
    "dev" : "webpack --mode development",
    "build" : "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

• npm run dev
• nom run build

11 - Webpack Mode

12 - Webpack Autoreload e Watch

• npm i --save-dev webpack-dev-server

13 - Gerar HTML com Webpack

14 - Webpack Loaders - Carregar CSS

15 - Webpack Loaders - Criar Arquivo CSS

16 - Webpack Loader Arquivos SASS

17 - Webpack Minificar Arquivos CSS

18 - Webpack Load de Imagens

• terminado!

Voltar ao Índice

---