├── .babelrc ├── .gitignore ├── README.md ├── docs ├── assets │ └── webpack-sprite.png ├── index.html ├── main.0d7cfbbe34c458d9ccea.js └── main.c9be7f6706a28700d217.css ├── package-lock.json ├── package.json ├── src ├── assets │ └── webpack-sprite.png ├── css │ └── componentes.css ├── favicon.ico ├── index.html ├── index.ts └── styles.css ├── tsconfig.json ├── webpack.config.js └── webpack.prod.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env","minify"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | 3 | node_modules/ 4 | 5 | dist/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Webpack Starter 2 | 3 | Este es el proyecto inicial para crear aplicaciones utilizando webpack. 4 | 5 | ### Notas: 6 | Recuerden reconstruir los módulos de Node 7 | ``` 8 | npm install 9 | ``` 10 | 11 | Y para construir el build, recueren: 12 | ``` 13 | npm run build 14 | ``` -------------------------------------------------------------------------------- /docs/assets/webpack-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Klerith/webpack-starter-typescript/7411f36257a4d3703cf8483dcf857dc2ce32212b/docs/assets/webpack-sprite.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 8 | 9 | 10 | 11 | Webpack logo 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /docs/main.0d7cfbbe34c458d9ccea.js: -------------------------------------------------------------------------------- 1 | (function(a){function b(d){if(c[d])return c[d].exports;var e=c[d]={i:d,l:!1,exports:{}};return a[d].call(e.exports,e,e.exports,b),e.l=!0,e.exports}var c={};return b.m=a,b.c=c,b.d=function(a,c,d){b.o(a,c)||Object.defineProperty(a,c,{enumerable:!0,get:d})},b.r=function(a){'undefined'!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(a,Symbol.toStringTag,{value:'Module'}),Object.defineProperty(a,'__esModule',{value:!0})},b.t=function(a,c){if(1&c&&(a=b(a)),8&c)return a;if(4&c&&'object'==typeof a&&a&&a.__esModule)return a;var d=Object.create(null);if(b.r(d),Object.defineProperty(d,'default',{enumerable:!0,value:a}),2&c&&'string'!=typeof a)for(var e in a)b.d(d,e,function(b){return a[b]}.bind(null,e));return d},b.n=function(a){var c=a&&a.__esModule?function(){return a['default']}:function(){return a};return b.d(c,'a',c),c},b.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)},b.p='',b(b.s=5)})([function(a,b,c){var d=c(1),e=c(2);e=e.__esModule?e.default:e,'string'==typeof e&&(e=[[a.i,e,'']]);var f=d(a.i,e,{insert:'head',singleton:!1}),g=e.locals?e.locals:{};a.exports=g},function(a,b,c){'use strict';function d(a,b,c){for(var d,e=0;e 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack 9 | 10 | 11 | 12 | Webpack logo 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | const mensaje = 'Hola Mundo!'; 5 | 6 | console.log( mensaje ); -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* Este es el estilo del main */ 2 | html, body { 3 | background-color: gray; 4 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | // "incremental": true, /* Enable incremental compilation */ 5 | "target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ 6 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 7 | // "lib": [], /* Specify library files to be included in the compilation. */ 8 | // "allowJs": true, /* Allow javascript files to be compiled. */ 9 | // "checkJs": true, /* Report errors in .js files. */ 10 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 11 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 13 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 14 | // "outFile": "./", /* Concatenate and emit output to single file. */ 15 | // "outDir": "./", /* Redirect output structure to the directory. */ 16 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 17 | // "composite": true, /* Enable project compilation */ 18 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 19 | // "removeComments": true, /* Do not emit comments to output. */ 20 | // "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | 25 | /* Strict Type-Checking Options */ 26 | "strict": true, /* Enable all strict type-checking options. */ 27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 28 | // "strictNullChecks": true, /* Enable strict null checks. */ 29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 34 | 35 | /* Additional Checks */ 36 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 40 | 41 | /* Module Resolution Options */ 42 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 43 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 46 | // "typeRoots": [], /* List of folders to include type definitions from. */ 47 | // "types": [], /* Type declaration files to be included in compilation. */ 48 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 49 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 51 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 52 | 53 | /* Source Map Options */ 54 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 55 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 56 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 57 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 58 | 59 | /* Experimental Options */ 60 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 61 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebPackPlugin = require('html-webpack-plugin'); 2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 3 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 4 | const CopyPlugin = require('copy-webpack-plugin'); 5 | 6 | module.exports = { 7 | entry: './src/index.ts', 8 | mode: 'development', 9 | resolve: { 10 | extensions: ['.ts','.js','.json'] 11 | }, 12 | optimization: { 13 | minimizer: [ new OptimizeCssAssetsPlugin() ] 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.ts$/, 19 | use: 'ts-loader', 20 | exclude: /node_modules/ 21 | }, 22 | { 23 | test: /\.css$/, 24 | exclude: /styles\.css$/, 25 | use: [ 26 | 'style-loader', 27 | 'css-loader' 28 | ] 29 | }, 30 | { 31 | test: /styles\.css$/, 32 | use: [ 33 | MiniCssExtractPlugin.loader, 34 | 'css-loader' 35 | ] 36 | }, 37 | { 38 | test: /\.html$/, 39 | use: [ 40 | { 41 | loader: 'html-loader', 42 | options: { minimize: false } 43 | } 44 | ] 45 | }, 46 | { 47 | test: /\.(png|svg|jpg|gif|ico)$/, 48 | use: [ 49 | { 50 | loader: 'file-loader', 51 | options: { 52 | esModule: false, 53 | name: 'assets/[name].[ext]' 54 | } 55 | } 56 | ] 57 | } 58 | ] 59 | }, 60 | plugins: [ 61 | new HtmlWebPackPlugin({ 62 | template: './src/index.html', 63 | filename: './index.html' 64 | }), 65 | new MiniCssExtractPlugin({ 66 | filename: '[name].css', 67 | ignoreOrder: false 68 | }), 69 | new CopyPlugin([ 70 | { from: 'src/favicon.ico', to: './favicon.ico' }, 71 | ]), 72 | ] 73 | 74 | } 75 | 76 | -------------------------------------------------------------------------------- /webpack.prod.js: -------------------------------------------------------------------------------- 1 | const HtmlWebPackPlugin = require('html-webpack-plugin'); 2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 3 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 4 | const MinifyPlugin = require('babel-minify-webpack-plugin'); 5 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 6 | const CopyPlugin = require('copy-webpack-plugin'); 7 | 8 | module.exports = { 9 | entry: './src/index.ts', 10 | mode: 'production', 11 | resolve: { 12 | extensions: ['.ts','.js','.json'] 13 | }, 14 | optimization: { 15 | minimizer: [ new OptimizeCssAssetsPlugin() ] 16 | }, 17 | output: { 18 | filename: 'main.[contentHash].js' 19 | }, 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.ts$/, 24 | use: 'ts-loader', 25 | exclude: /node_modules/ 26 | }, 27 | { 28 | test: /\.js$/, 29 | exclude: /node_modules/, 30 | use: [ 31 | 'babel-loader' 32 | ] 33 | }, 34 | { 35 | test: /\.css$/, 36 | exclude: /styles\.css$/, 37 | use: [ 38 | 'style-loader', 39 | 'css-loader' 40 | ] 41 | }, 42 | { 43 | test: /styles\.css$/, 44 | use: [ 45 | MiniCssExtractPlugin.loader, 46 | 'css-loader' 47 | ] 48 | }, 49 | { 50 | test: /\.html$/, 51 | use: [ 52 | { 53 | loader: 'html-loader', 54 | options: { minimize: false } 55 | } 56 | ] 57 | }, 58 | { 59 | test: /\.(png|svg|jpg|gif|ico)$/, 60 | use: [ 61 | { 62 | loader: 'file-loader', 63 | options: { 64 | esModule: false, 65 | name: 'assets/[name].[ext]' 66 | } 67 | } 68 | ] 69 | } 70 | ] 71 | }, 72 | plugins: [ 73 | new HtmlWebPackPlugin({ 74 | template: './src/index.html', 75 | filename: './index.html' 76 | }), 77 | new MiniCssExtractPlugin({ 78 | filename: '[name].[contentHash].css', 79 | ignoreOrder: false 80 | }), 81 | new MinifyPlugin(), 82 | new CleanWebpackPlugin(), 83 | new CopyPlugin([ 84 | { from: 'src/favicon.ico', to: './favicon.ico' }, 85 | ]), 86 | ] 87 | 88 | } 89 | 90 | --------------------------------------------------------------------------------