Jesús Estévez
Just another simple developer
2008 España
Google "Remember" :
2012 España
Google "Remember" :
Asp.net 4.5 included a
Bundling feature
with @Lemoncode Samples
npm init
npm install webpack --save-dev
npm install babel-core --save-dev
npm install babel-preset-env --save-dev
npm install babel-loader --save-dev
Webpack.config.js
.Babelrc
module.exports = {
entry: ['./schoolModule.js'],
output: {
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
};
{
"presets": [
"env",
]
}
"scripts": {
"start": "webpack"
},
package.json
const averageScore = "90";
const messageToDisplay = `average score ${averageScore}`;
document.write(messageToDisplay);
schoolModule.js
<html>
<head>
</head>
<body>
Hello Webpack 2!
<script src="bundle.js"></script>
</body>
</html>
/***/ (function(module, exports, __webpack_require__) {
"use strict";
// Let's use some ES6 features
var averageScore = "90";
var messageToDisplay = "average score " + averageScore;
document.write(messageToDisplay);
bundle.js
Use bundle.js in .html
webpack
>
export class student{
constructor(value){
this.value = `student average score ${value}`;
this.appendToDoc = () =>{
document.write(this.value);
}
}
}
import { student } from './schoolModule'
let myComponent = new student("90");
myComponent.appendToDoc();
App.js
schoolModule.js
<html>
<head>
</head>
<body>
WebPack Boiler Plate
<script src="bundle.js"></script>
</body>
</html>
var webComponent = exports.webComponent =
function webComponent(value) {
var _this = this;
_classCallCheck(this, webComponent);
this.value = value;
this.appendToDoc = function () {
document.write(_this.value);
};
};
npm start
bundle.js
Use bundle in .html
module.exports = {
entry: ['./app.js'],
Update webpack.config entry
>
npm install webpack-dev-server --save-dev
"scripts": {
"start": "webpack-dev-server"
},
package.json
devServer: {
port: 8080,
},
webpack.config.js
>
The new C&P
Text
C&P
Let Start Building reusable
"Web Components*"
/*template.html*/
<form ng-submit="todoAdd()">
<input type="text" ng-model="todoInput"
size="50" placeholder="Add New">
<input type="submit" value="Add New">
</form>
<br>
<div ng-repeat="x in todoList">
<input type="checkbox" ng-model="x.done">
<span ng-bind="x.todoText"></span>
</div>
<p><button ng-click="remove()">Remove marked</button></p>
//src/app.js
import {todoComponent} from './todoComponent'
import * as angular from 'angular'
var app = angular.module('myTodoApp', []);
app.component('todoComponent', todoComponent);
//src/todoComponent.js
function todoCtrl($scope) {
$scope.todoList = [{todoText:'Learn Angular 4', done:false}];
$scope.todoAdd = function() {
$scope.todoList.push({todoText:$scope.todoInput, done:false});
$scope.todoInput = "";
};
$scope.remove = function() {
var oldList = $scope.todoList;
$scope.todoList = [];
angular.forEach(oldList, function(x) {
if (!x.done) $scope.todoList.push(x);
});
};
};
export const todoComponent = {
template: require('../template.html'),
controller:todoCtrl
}
/*index.html*/
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body ng-app="myTodoApp" >
<h2>My Todo List</h2>
<todo-component />
<script src="dist/app_bundle.js"></script>
</body>
</html>
npm init
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
npm install raw-loader --save-dev
npm install babel-core --save-dev
npm install babel-preset-env --save-dev
npm install babel-loader --save-dev
npm install angular --save
var webpack = require('webpack');
module.exports = {
entry: {
app: './src/app.js',
vendor: [
'angular',
]
},
output:{
filename:'dist/[name]_bundle.js'
},
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'raw-loader',
},
]
},
devServer:{
port:8080,
}
};
{
"presets": [
"env",
]
}
webpack.config.js
.babelrc
npm start
No problem! All Samples in bit.ly/webpackSamples
by
{
"presets": [
[
"env",
{
"modules": false,
},
],
]
}
"scripts": {
"start": "webpack-dev-server",
"build:dev": "webpack",
"build:prod": "webpack -p"
},
npm run build:prod
.babelrc
package.json
npm install html-webpack-plugin --save-dev
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var basePath = __dirname;
module.exports = {
entry: ['./students.js'],
output: {
path: path.join(basePath, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
// For development https://webpack.js.org/configuration/devtool/#for-development
devtool: 'inline-source-map',
devServer: {
port: 8080,
},
plugins: [
//Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html', //Name of file in ./dist/
template: 'index.html', //Name of template in ./src
hash: true,
}),
],
};
and see you all in
Materials in:
By Jesús Estévez