New webpack config, scripts & moved dist, favicons & assets to /public
@@ -5,8 +5,8 @@
|
|||||||
"author": "Kevin Midboe",
|
"author": "Kevin Midboe",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
|
"dev": "cross-env NODE_ENV=development webpack server",
|
||||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
"build": "cross-env NODE_ENV=production webpack-cli build --progress -c webpack.config.js",
|
||||||
"start": "node server.js",
|
"start": "node server.js",
|
||||||
"docs": "documentation build src/api.js -f html -o docs/api && documentation build src/api.js -f md -o docs/api.md"
|
"docs": "documentation build src/api.js -f html -o docs/api && documentation build src/api.js -f md -o docs/api.md"
|
||||||
},
|
},
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 139 KiB After Width: | Height: | Size: 139 KiB |
BIN
public/assets/dune.jpg
Normal file
|
After Width: | Height: | Size: 641 KiB |
BIN
public/assets/mandalorian.jpg
Normal file
|
After Width: | Height: | Size: 331 KiB |
13
public/assets/no-image.svg
Normal file
|
After Width: | Height: | Size: 6.3 KiB |
13
public/assets/no-image_small.svg
Normal file
|
After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 275 KiB After Width: | Height: | Size: 275 KiB |
|
Before Width: | Height: | Size: 423 KiB After Width: | Height: | Size: 423 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 889 B After Width: | Height: | Size: 889 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
35
public/index.html
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&subset=cyrillic"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<title>request.movie</title>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="/favicons/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" />
|
||||||
|
<link rel="manifest" href="/favicons/manifest.json" />
|
||||||
|
<link
|
||||||
|
rel="mask-icon"
|
||||||
|
href="/favicons/safari-pinned-tab.svg"
|
||||||
|
color="#01d277"
|
||||||
|
/>
|
||||||
|
<meta name="theme-color" content="#081c24" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="text/javascript" src="/dist/build.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="https://cdn.ravenjs.com/3.23.1/vue/raven.min.js"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
|
</html>
|
||||||
27
server.js
@@ -1,23 +1,18 @@
|
|||||||
var express = require('express');
|
const express = require("express");
|
||||||
var path = require('path');
|
const path = require("path");
|
||||||
const compression = require('compression')
|
const history = require("connect-history-api-fallback");
|
||||||
var history = require('connect-history-api-fallback');
|
|
||||||
|
const publicPath = path.join(__dirname, "public");
|
||||||
|
|
||||||
app = express();
|
app = express();
|
||||||
|
app.use("/", express.static(publicPath));
|
||||||
|
app.use(history({ index: "/" }));
|
||||||
|
|
||||||
app.use(compression())
|
app.get("/", function (req, res) {
|
||||||
app.use('/dist', express.static(path.join(__dirname + "/dist")));
|
res.sendFile(`${publicPath}/index.html`);
|
||||||
app.use('/dist', express.static(path.join(__dirname + "/dist/")));
|
|
||||||
app.use('/favicons', express.static(path.join(__dirname + "/favicons")));
|
|
||||||
app.use(history({
|
|
||||||
index: '/'
|
|
||||||
}));
|
|
||||||
|
|
||||||
var port = process.env.PORT || 5000;
|
|
||||||
|
|
||||||
app.get('/', function(req, res) {
|
|
||||||
res.sendFile(path.join(__dirname + '/index.html'));
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const port = process.env.PORT || 5001;
|
||||||
|
console.log("Server runnning at port:", port);
|
||||||
|
|
||||||
app.listen(port);
|
app.listen(port);
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.9 KiB |
@@ -1,88 +1,97 @@
|
|||||||
var path = require('path')
|
const path = require("path");
|
||||||
var webpack = require('webpack')
|
const webpack = require("webpack");
|
||||||
|
const sass = require("sass");
|
||||||
|
|
||||||
|
const { VueLoaderPlugin } = require("vue-loader");
|
||||||
|
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||||
|
const TerserPlugin = require("terser-webpack-plugin");
|
||||||
|
|
||||||
|
const publicPath = path.resolve(__dirname, "public");
|
||||||
|
const isProd = process.env.NODE_ENV === "production";
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: './src/main.js',
|
context: path.resolve(__dirname, "src"),
|
||||||
|
entry: "/main.js",
|
||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, './dist'),
|
path: `${publicPath}/dist/`,
|
||||||
publicPath: '/dist/',
|
publicPath: "/dist/",
|
||||||
filename: 'build.js'
|
filename: "build.js",
|
||||||
|
clean: true
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
{
|
|
||||||
test: /\.vue$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'vue-loader',
|
|
||||||
options: {
|
|
||||||
loaders: {
|
|
||||||
'scss': 'vue-style-loader!css-loader!sass-loader',
|
|
||||||
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loader: 'vue-svg-inline-loader'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
test: /\.js$/,
|
test: /\.js$/,
|
||||||
loader: 'babel-loader',
|
loader: "babel-loader",
|
||||||
options: {
|
options: {
|
||||||
presets: ['@babel/preset-env']
|
presets: ["@babel/preset-env"]
|
||||||
},
|
},
|
||||||
exclude: /node_modules/
|
exclude: /node_modules/
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: /\.vue$/,
|
||||||
|
use: ["vue-loader"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.scss$/,
|
||||||
|
use: [
|
||||||
|
"vue-style-loader",
|
||||||
|
// isProd ? MiniCssExtractPlugin.loader : "vue-style-loader",
|
||||||
|
"css-loader",
|
||||||
|
"sass-loader"
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
test: /\.(png|jpg|gif|svg)$/,
|
test: /\.(png|jpg|gif|svg)$/,
|
||||||
loader: 'file-loader',
|
loader: "file-loader",
|
||||||
options: {
|
options: {
|
||||||
name: '[name].[ext]'
|
name: "[name].[ext]?[hash]"
|
||||||
// name: '[name].[ext]?[hash]'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
plugins: [new VueLoaderPlugin()],
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.js', '.vue', '.json', 'scss'],
|
extensions: [".js", ".vue", ".json", ".scss"],
|
||||||
alias: {
|
alias: {
|
||||||
'vue$': 'vue/dist/vue.common.js',
|
vue$: "vue/dist/vue.common.js",
|
||||||
'@': path.resolve(__dirname, './src'),
|
"@": path.resolve(__dirname, "src"),
|
||||||
'src': path.resolve(__dirname, './src'),
|
src: path.resolve(__dirname, "src"),
|
||||||
'assets': path.resolve(__dirname, './src/assets'),
|
assets: `${publicPath}/assets`,
|
||||||
'components': path.resolve(__dirname, './src/components')
|
components: path.resolve(__dirname, "src/components")
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
devServer: {
|
devServer: {
|
||||||
historyApiFallback: true,
|
static: publicPath,
|
||||||
inline: true,
|
historyApiFallback: {
|
||||||
noInfo: true
|
index: "index.html"
|
||||||
|
},
|
||||||
|
compress: true,
|
||||||
|
port: 8080
|
||||||
},
|
},
|
||||||
performance: {
|
performance: {
|
||||||
hints: false
|
hints: false
|
||||||
},
|
},
|
||||||
devtool: 'inline-source-map'
|
optimization: {
|
||||||
}
|
minimizer: [
|
||||||
|
new TerserPlugin({
|
||||||
|
parallel: true,
|
||||||
|
terserOptions: {
|
||||||
|
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]
|
||||||
|
},
|
||||||
|
devtool: "inline-source-map"
|
||||||
|
};
|
||||||
|
|
||||||
if (process.env.NODE_ENV === 'production') {
|
if (isProd) {
|
||||||
module.exports.devtool = '#source-map'
|
module.exports.mode = "production";
|
||||||
// http://vue-loader.vuejs.org/en/workflow/production.html
|
module.exports.devtool = false;
|
||||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
// module.exports.plugins.push(
|
||||||
new webpack.DefinePlugin({
|
// new MiniCssExtractPlugin({
|
||||||
'process.env': {
|
// filename: "[name].css",
|
||||||
NODE_ENV: '"production"'
|
// chunkFilename: "[id].css"
|
||||||
}
|
// })
|
||||||
}),
|
// );
|
||||||
new webpack.optimize.UglifyJsPlugin({
|
|
||||||
sourceMap: true,
|
|
||||||
compress: {
|
|
||||||
warnings: false
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
new webpack.LoaderOptionsPlugin({
|
|
||||||
minimize: true
|
|
||||||
})
|
|
||||||
])
|
|
||||||
}
|
}
|
||||||
|
|||||||