Builds using webpack but doesn't do much yet

81c006e7 · Will Billingsley · 81c006e7 · 81c006e7 · 81c006e7 · 81c006e7
Commit 81c006e7 authored 6 years ago by Will Billingsley
--- a/.gitignore
+++ b/.gitignore
+dist/
+node_modules/
+zip/
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html>
+<head></head>
+
+<body>
+    <div id="app">
+
+
+    </div>
+</body>
+<script src="./dist/build.js"></script>
+<link rel="stylesheet" href="styles.css" />
+
+</html>
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "chemcards",
+  "version": "1.0.0",
+  "description": "A game to learn chemistry",
+  "private": true,
+  "scripts": {
+    "build": "webpack",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Will Billingsley",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^1.0.0",
+    "ts-loader": "^4.4.2",
+    "typescript": "^2.9.2",
+    "vue": "^2.5.16",
+    "vue-class-component": "^6.2.0",
+    "vue-loader": "^15.2.6",
+    "vue-template-compiler": "^2.5.16",
+    "webpack": "^4.16.2",
+    "webpack-cli": "^3.1.0"
+  }
+}
--- a/src/components/CardView.ts
+++ b/src/components/CardView.ts
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component({
+  template: ''
+})
+export default class CardView extends Vue {
+    
+}
\ No newline at end of file
--- a/src/components/GameHeaderView.ts
+++ b/src/components/GameHeaderView.ts
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component({
+  template: `
+    <div class="game-header">
+      Hello here
+    </div>
+  `
+})
+export default class GameHeaderView extends Vue {
+    
+}
\ No newline at end of file
--- a/src/index.ts
+++ b/src/index.ts
+// src/index.ts
+
+import Vue from "vue";
+import GameHeaderView from "./components/GameHeaderView";
+
+let v = new Vue({
+    el: "#app",
+    template: `
+    <div class="card-table">
+        <game-header-view></game-header-view>
+        <div>Hello {{name}}!</div>
+        Name: <input v-model="name" type="text">
+    </div>`,
+    data: {
+        name: "World"
+    },
+    components: {
+        GameHeaderView
+    }
+});
\ No newline at end of file
--- a/src/model/Card.ts
+++ b/src/model/Card.ts
+export default interface Card {
+    
+    name: String,
+
+    svg: String
+
+}
+
+const cardList = [
+
+    {
+        name: "A1",
+        svg: ""
+    }
+
+
+]
+
--- a/styles.css
+++ b/styles.css
+.card-table {
+    display: flex;
+    flex-direction: column;
+}
+
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+    "compilerOptions": {
+        "outDir": "./built/",
+        "sourceMap": true,
+        "strict": true,
+        "noImplicitReturns": true,
+        "module": "es2015",
+        "moduleResolution": "node",
+        "target": "es5",
+        "experimentalDecorators": true
+    },
+    "include": [
+        "./src/**/*"
+    ]
+}
\ No newline at end of file
--- a/webpack.config.js
+++ b/webpack.config.js
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: './src/index.ts',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/',
+    filename: 'build.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
+            // the "scss" and "sass" values for the lang attribute to the right configs here.
+            // other preprocessors should work out of the box, no loader config like this necessary.
+            'scss': 'vue-style-loader!css-loader!sass-loader',
+            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
+          }
+          // other vue-loader options go here
+        }
+      },
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        exclude: /node_modules/,
+        options: {
+          appendTsSuffixTo: [/\.vue$/],
+        }
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]'
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.ts', '.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    }
+  },
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true
+  },
+  performance: {
+    hints: false
+  },
+  devtool: '#eval-source-map'
+}
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports.devtool = '#source-map'
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ])
+}
\ No newline at end of file