Master Lemoncode
Webpack sesión 3
por Jesús Rodríguez Rodríguez
@Foxandxss
Qué tiene un package.json?
{
"name": "my-library",
"version": "1.0.0-alpha.1",
"description": "Super library about nothing in special",
"homepage": "https://gihub.com/example/my-library",
"bugs": "https://gihub.com/example/my-library/issues",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/example/my-library.git"
},
"author": "Paquito <paquito@pelotes.com>",
"keywords": ["awesome", "useless", "example"]
}Metadatos:
Qué tiene un package.json?
{
"scripts": {
"start": "webpack-dev-server --config=dev.webpack.config.js",
"build:dev": "rimraf dist && webpack --config=dev.webpack.config.js",
"build:prod": "rimraf dist && webpack -p --config=prod.webpack.config.js",
"lint": "tslint ./src/**/*.ts",
"test": "karma stasrt karma.conf.js"
}
}Scripts:
Qué tiene un package.json?
{
"dependencies": {
"@angular/core": "4.0.0",
"rxjs": "5.2.0"
}
}Dependencias:
Dependencias de desarrollo:
{
"devDependencies": {
"webpack": "2.2.1",
"webpack-dev-server": "2.3.0"
}
}Qué tiene un package.json?
{
"peerDependencies": {
"webpack": "2.2.1"
}
}Peer dependencies:
Dependencias opcionales:
{
"optionalDependencies": {
"fsevents": "1.1.1"
}
}Un poco de historia...
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.0.0/FileSaver.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.js"></script>
<script src="ui-bootstrap-tpls-1.5.3.min.js"></script>
<script src="assets/plunker.js"></script>
<script src="assets/app.js"></script>
<script src="assets/smoothscroll-angular-custom.js"></script>
<script src="assets/uglifyjs.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/rainbow.css"/>
<link rel="stylesheet" href="assets/demo.css"/>
</head><head>
<script src="bundles/app.js"></script>
<script src="bundles/vendor.js"></script>
<link href="bundles/app.css" rel="stylesheet"/>
</head>CommonJS / CommonJS2
// calculadora.js
function suma(n1, n2) {
return n1 + n2;
}
function resta(n1, n2) {
return n1 - n2;
}
module.exports = {
suma: suma,
resta: resta
};// app.js
var calculadora = require('./calculadora');
calculadora.suma(10, 10);
calculadora.resta(5, 3);export.dividir = (num1, num2) => num1 / num2;AMD
define('nombre/modulo', ['dep1', 'dep2', 'dep3'],
function(dep1, dep2, dep3) {
// Nuestro código aquí
// Definimos el módulo devolviendo algún valor
return function() { };
});require(['nombre/modulo'], function(modulo) {
// hacer algo con el módulo
});ES2015
// calculator.js
export const pi = 3.14159;
export function suma(num1, num2) {
return num1 + num2;
}// app.js
import { pi, suma } from './calculator';
suma(pi, pi);UMD
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["rightPad"] = factory();
else
root["rightPad"] = factory();
})(this, function() {Semver
Instalando versiones
Gorrito (por defecto)
"paquete": "^4.0.0"Tilde:
"paquete": "~4.1.2"Fijo:
"paquete": "4.1.2"Master lemoncode - Webpack
By Jesus Rodriguez
