Ray Burgemeestre
6 years ago
6 changed files with 1500 additions and 6 deletions
+ 7
- 1
README.md
View File
| Followed this readme | |||||
| Followed this readme for webpack: | |||||
| https://webpack.js.org/guides/getting-started/ | https://webpack.js.org/guides/getting-started/ | ||||
| Followed this for bulma: | |||||
| https://bulma.io/documentation/customize/with-webpack/ | |||||
| For vuejs: | |||||
| https://itnext.io/vuejs-and-webpack-4-from-scratch-part-1-94c9c28a534a |
+ 3
- 0
dist/index.html
View File
| <body> | <body> | ||||
| <div id="app"></div> | <div id="app"></div> | ||||
| <div id="container" style="width:800px; height:600px;"></div> | <div id="container" style="width:800px; height:600px;"></div> | ||||
| <!-- for development commented out | |||||
| <script src="main.js"></script> | <script src="main.js"></script> | ||||
| --> | |||||
| <div id="my-statusbar"></div> | <div id="my-statusbar"></div> | ||||
| <h1 class="title"> | <h1 class="title"> | ||||
| Bulma | Bulma |
+ 1466
- 0
package-lock.json
File diff suppressed because it is too large
View File
+ 5
- 2
package.json
View File
| "private": true, | "private": true, | ||||
| "scripts": { | "scripts": { | ||||
| "test": "echo \"Error: no test specified\" && exit 1", | "test": "echo \"Error: no test specified\" && exit 1", | ||||
| "build": "webpack" | |||||
| "build": "webpack", | |||||
| "dev": "webpack-dev-server --config webpack.config.js" | |||||
| }, | }, | ||||
| "author": "", | "author": "", | ||||
| "license": "ISC", | "license": "ISC", | ||||
| "bulma": "^0.7.2", | "bulma": "^0.7.2", | ||||
| "css-loader": "^1.0.0", | "css-loader": "^1.0.0", | ||||
| "extract-text-webpack-plugin": "^4.0.0-beta.0", | "extract-text-webpack-plugin": "^4.0.0-beta.0", | ||||
| "html-webpack-plugin": "^3.2.0", | |||||
| "node-sass": "^4.9.4", | "node-sass": "^4.9.4", | ||||
| "sass-loader": "^7.1.0", | "sass-loader": "^7.1.0", | ||||
| "style-loader": "^0.23.1", | "style-loader": "^0.23.1", | ||||
| "vue-style-loader": "^4.1.2", | "vue-style-loader": "^4.1.2", | ||||
| "vue-template-compiler": "^2.5.17", | "vue-template-compiler": "^2.5.17", | ||||
| "webpack": "^4.21.0", | "webpack": "^4.21.0", | ||||
| "webpack-cli": "^3.1.2" | |||||
| "webpack-cli": "^3.1.2", | |||||
| "webpack-dev-server": "^3.1.9" | |||||
| }, | }, | ||||
| "dependencies": { | "dependencies": { | ||||
| "lodash": "^4.17.11", | "lodash": "^4.17.11", |
+ 1
- 1
src/App.vue
View File
| <template> | <template> | ||||
| <div> | <div> | ||||
| <h1>Hello World!</h1> | |||||
| <h1>Hello World wWohoo!</h1> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
+ 18
- 2
webpack.config.js
View File
| const path = require('path'); | const path = require('path'); | ||||
| const webpack = require('webpack'); | |||||
| const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); | const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); | ||||
| const ExtractTextPlugin = require("extract-text-webpack-plugin"); | const ExtractTextPlugin = require("extract-text-webpack-plugin"); | ||||
| const { VueLoaderPlugin } = require('vue-loader') | |||||
| const { VueLoaderPlugin } = require('vue-loader'); | |||||
| const HtmlWebpackPlugin = require('html-webpack-plugin'); | |||||
| module.exports = { | module.exports = { | ||||
| mode: 'development', // change to production when ready | |||||
| devServer: { | |||||
| hot: true, | |||||
| watchOptions: { | |||||
| poll: true | |||||
| } | |||||
| }, | |||||
| entry: './src/index.js', | entry: './src/index.js', | ||||
| output: { | output: { | ||||
| filename: 'main.js', | filename: 'main.js', | ||||
| ] | ] | ||||
| }, | }, | ||||
| plugins: [ | plugins: [ | ||||
| new webpack.HotModuleReplacementPlugin(), // for development | |||||
| new HtmlWebpackPlugin({ | |||||
| filename: 'index.html', | |||||
| template: 'dist/index.html', | |||||
| inject: true | |||||
| }), // for development | |||||
| new MonacoWebpackPlugin(), | new MonacoWebpackPlugin(), | ||||
| new ExtractTextPlugin('css/mystyles.css'), | new ExtractTextPlugin('css/mystyles.css'), | ||||
| new VueLoaderPlugin() | new VueLoaderPlugin() |
Loading…