Commit ff0fd7a4 authored by Zac Wood's avatar Zac Wood

Basic Typescript + React webpack config

parent 9ccdc675
!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n){document.body.appendChild(function(){const e=document.createElement("div");return e.innerHTML="Hi",e}())}]);
\ No newline at end of file
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=3)}([function(e,t){e.exports=React},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(0);t.Hello=function(e){return n.createElement("h1",null,"Hello from ",e.compilier," and ",e.framework)}},function(e,t){e.exports=ReactDOM},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(0),o=r(2),u=r(1);o.render(n.createElement(u.Hello,{compilier:"TypeScript",framework:"React"}),document.getElementById("root"))}]);
//# sourceMappingURL=bundle.js.map
\ No newline at end of file
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///external \"React\"","webpack:///./src/components/Hello.tsx","webpack:///external \"ReactDOM\"","webpack:///./src/index.tsx"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","configurable","enumerable","get","r","value","n","__esModule","object","property","prototype","hasOwnProperty","p","s","React","Hello","props","createElement","compilier","framework","ReactDOM","Hello_1","render","document","getElementById"],"mappings":"aACA,IAAAA,KAGA,SAAAC,EAAAC,GAGA,GAAAF,EAAAE,GACA,OAAAF,EAAAE,GAAAC,QAGA,IAAAC,EAAAJ,EAAAE,IACAG,EAAAH,EACAI,GAAA,EACAH,YAUA,OANAI,EAAAL,GAAAM,KAAAJ,EAAAD,QAAAC,IAAAD,QAAAF,GAGAG,EAAAE,GAAA,EAGAF,EAAAD,QAKAF,EAAAQ,EAAAF,EAGAN,EAAAS,EAAAV,EAGAC,EAAAU,EAAA,SAAAR,EAAAS,EAAAC,GACAZ,EAAAa,EAAAX,EAAAS,IACAG,OAAAC,eAAAb,EAAAS,GACAK,cAAA,EACAC,YAAA,EACAC,IAAAN,KAMAZ,EAAAmB,EAAA,SAAAjB,GACAY,OAAAC,eAAAb,EAAA,cAAiDkB,OAAA,KAIjDpB,EAAAqB,EAAA,SAAAlB,GACA,IAAAS,EAAAT,KAAAmB,WACA,WAA2B,OAAAnB,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAH,EAAAU,EAAAE,EAAA,IAAAA,GACAA,GAIAZ,EAAAa,EAAA,SAAAU,EAAAC,GAAsD,OAAAV,OAAAW,UAAAC,eAAAnB,KAAAgB,EAAAC,IAGtDxB,EAAA2B,EAAA,GAIA3B,IAAA4B,EAAA,mBCnEAzB,EAAAD,QAAA2B,qFCAA,IAAAA,EAAA7B,EAAA,GAOaE,EAAA4B,MAAQ,SAACC,GAAiB,OAAAF,EAAAG,cAAA,wBAAgBD,EAAME,kBAAgBF,EAAMG,2BCPnF/B,EAAAD,QAAAiC,wFCAA,IAAAN,EAAA7B,EAAA,GACAmC,EAAAnC,EAAA,GAEAoC,EAAApC,EAAA,GAEAmC,EAASE,OACLR,EAAAG,cAACI,EAAAN,OAAMG,UAAU,aAAaC,UAAU,UACxCI,SAASC,eAAe","file":"bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 3);\n","module.exports = React;","import * as React from 'react';\n\nexport interface Props {\n compilier: string;\n framework: string;\n}\n\nexport const Hello = (props: Props) => <h1>Hello from {props.compilier} and {props.framework}</h1>;","module.exports = ReactDOM;","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport { Hello } from './components/Hello';\n\nReactDOM.render(\n <Hello compilier=\"TypeScript\" framework=\"React\" />,\n document.getElementById(\"root\")\n);"],"sourceRoot":""}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="root"></div>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
\ No newline at end of file
......@@ -9,7 +9,16 @@
"license": "Apache",
"private": true,
"devDependencies": {
"awesome-typescript-loader": "^5.0.0",
"source-map-loader": "^0.2.3",
"typescript": "^2.8.3",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
},
"dependencies": {
"@types/react": "^16.3.12",
"@types/react-dom": "^16.0.5",
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
}
import * as React from 'react';
export interface Props {
compilier: string;
framework: string;
}
export const Hello = (props: Props) => <h1>Hello from {props.compilier} and {props.framework}</h1>;
\ No newline at end of file
function component() {
const element = document.createElement('div');
element.innerHTML = "Hi";
return element;
}
document.body.appendChild(component());
\ No newline at end of file
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Hello } from './components/Hello';
ReactDOM.render(
<Hello compilier="TypeScript" framework="React" />,
document.getElementById("root")
);
\ No newline at end of file
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
\ No newline at end of file
const path = require('path');
module.exports = {
entry: './src/index.js',
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json']
},
module: {
rules: [
{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }
]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
}
};
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment