├── .gitignore ├── LICENSE ├── README.md ├── build └── index.html ├── package.json ├── src ├── styles │ ├── _base.scss │ ├── _variables.scss │ └── index.scss └── ts │ ├── app │ ├── app.ts │ └── hello.ts │ └── helpers │ ├── exclaim.ts │ └── index.ts ├── tsconfig.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | # vim 40 | .tern-project 41 | *.swp 42 | 43 | # this project 44 | bundle.js 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 JS Channel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Webpack Tutorial 2 | ================ 3 | 4 | Este repositório é parte da série [Webpack Tutorial](https://www.youtube.com/playlist?list=PLhxF6V44XvXR05fSeNf38-67k3FZK2KLI) do canal JS Channel, no YouTube. 5 | 6 | Objetivo 7 | -------- 8 | 9 | Esta série vai te ensinar Webpack de forma rápida, focada na prática. 10 | E você entenderá o suficiente para iniciar uma configuração específica para o seu projeto. 11 | 12 | O que iremos aprender 13 | --------------------- 14 | 15 | 1. O Que é e Como Webpack funciona 16 | 2. Definir o arquivo de configuração 17 | 3. Resolver extensões de arquivos 18 | 4. Trabalhar com Path Aliases 19 | 5. Loaders 20 | - O que são 21 | - Exemplos de loaders: ts-loader e sass-loader 22 | 6. Plugins 23 | - Minificando arquivos javascript 24 | 7. Configurando ambiente de Desenvolvimento 25 | - webpack-dev-server 26 | - Refresh automático no browser ao salvar um arquivo 27 | - Hot Module Replacement 28 | - Source Maps 29 | 8. Ambiente de Produção 30 | 31 | Instalação 32 | ---------- 33 | 34 | Pré-requisitos. 35 | 36 | - [Node.js](https://nodejs.org/) 37 | - [Git](https://git-scm.com/) 38 | 39 | Para instalar, execute os comandos abaixo. 40 | 41 | 1. Clone o repositório na sua máquina local. 42 | - ```git clone https://github.com/js-channel/webpack-tutorial.git``` 43 | 2. Navegue até a pasta do projeto e instale as dependências. 44 | - ```cd webpack-tutorial && npm install``` 45 | 3. Execute a aplicação. 46 | - ```npm start``` 47 | 4. Abra a aplicação no browser com a URL 48 | - ```localhost:8080``` 49 | 50 | Branchs e Videos 51 | --------------- 52 | 53 | Há um branch para cada vídeo. Então, por exemplo, para ver todo o código feito desde o começo da série até o vídeo #6, você pode executar este comando git no terminal: 54 | 55 | ```git checkout #6_Arquivo-de-Configuracao``` 56 | 57 | Dessa forma, você pode ficar alternando entre o código feito em cada vídeo da série. 58 | 59 | Para visualizar todos os branchs, basta executar o comando: 60 | 61 | ```git branch -r``` 62 | 63 | Licença 64 | ------- 65 | 66 | Feito com amor _um teclado_ por Danilo Barros sob [Licença MIT](https://danilobjr.mit-license.org/). 67 | -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-tutorial", 3 | "version": "1.0.0", 4 | "description": "Webpack Tutorial ================", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --content-base build --inline --hot", 8 | "build": "NODE_ENV=production webpack -p" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/js-channel/webpack-tutorial.git" 13 | }, 14 | "author": "", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/js-channel/webpack-tutorial/issues" 18 | }, 19 | "homepage": "https://github.com/js-channel/webpack-tutorial#readme", 20 | "devDependencies": { 21 | "css-loader": "^0.25.0", 22 | "node-sass": "^3.10.1", 23 | "sass-loader": "^4.0.2", 24 | "style-loader": "^0.13.1", 25 | "ts-loader": "^0.9.5", 26 | "typescript": "^2.0.6", 27 | "webpack": "^1.13.2", 28 | "webpack-dev-server": "^1.16.2" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/styles/_base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: $font-family; 3 | color: $font-color; 4 | background-color: $bg-color; 5 | } 6 | -------------------------------------------------------------------------------- /src/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $font-family: helvetica; 2 | $font-color: #ecf0f1; 3 | $bg-color: #3498db; 4 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import 'base'; 3 | -------------------------------------------------------------------------------- /src/ts/app/app.ts: -------------------------------------------------------------------------------- 1 | import 'styles' 2 | import { sayHelloTo } from './hello' 3 | 4 | let module: any; 5 | const hot = module.hot; 6 | 7 | const h1 = document.createElement('h1'); 8 | h1.innerText = sayHelloTo('Javascript Developer'); 9 | 10 | document.body.appendChild(h1); 11 | 12 | if (hot) { 13 | hot.accept(); 14 | hot.dispose(() => h1.parentNode.removeChild(h1)); 15 | } 16 | -------------------------------------------------------------------------------- /src/ts/app/hello.ts: -------------------------------------------------------------------------------- 1 | import { exclaim } from 'helpers' 2 | 3 | const sayHelloTo = name => exclaim(`Hello, ${name}`) 4 | 5 | export { 6 | sayHelloTo 7 | } 8 | -------------------------------------------------------------------------------- /src/ts/helpers/exclaim.ts: -------------------------------------------------------------------------------- 1 | const exclaim = text => `${text}!!!` 2 | 3 | export { 4 | exclaim 5 | } 6 | -------------------------------------------------------------------------------- /src/ts/helpers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './exclaim' 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "sourceMap": true 5 | }, 6 | "exclude": [ 7 | "node_modules" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | 4 | const resolvePath = (pathToResolve = '') => path.resolve(__dirname, pathToResolve) 5 | const isProductionEnvironment = process.env.NODE_ENV === 'production' 6 | 7 | module.exports = { 8 | entry: resolvePath('src/ts/app/app.ts'), 9 | output: { 10 | path: resolvePath('build'), 11 | filename: 'bundle.js' 12 | }, 13 | devtool: 'source-map', 14 | module: { 15 | loaders: [ 16 | { 17 | test: /\.ts$/, 18 | include: [resolvePath('src/ts')], 19 | loader: 'ts-loader' 20 | }, 21 | { 22 | test: /\.s(a|c)ss$/, 23 | include: [resolvePath('src/styles')], 24 | loader: 'style!css!sass' 25 | } 26 | ] 27 | }, 28 | resolve: { 29 | extensions: ['', '.webpack.js', '.web.js', '.js', '.ts', '.scss'], 30 | alias: { 31 | styles: resolvePath('src/styles'), 32 | helpers: resolvePath('src/ts/helpers') 33 | } 34 | }, 35 | plugins: isProductionEnvironment ? [ 36 | new webpack.optimize.UglifyJsPlugin({ 37 | compress: { warnings: false } 38 | }) 39 | ] : [] 40 | } 41 | --------------------------------------------------------------------------------