New webpack config, scripts & moved dist, favicons & assets to /public
@@ -5,8 +5,8 @@
|
||||
"author": "Kevin Midboe",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
"dev": "cross-env NODE_ENV=development webpack server",
|
||||
"build": "cross-env NODE_ENV=production webpack-cli build --progress -c webpack.config.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"
|
||||
},
|
||||
|
||||
|
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');
|
||||
var path = require('path');
|
||||
const compression = require('compression')
|
||||
var history = require('connect-history-api-fallback');
|
||||
const express = require("express");
|
||||
const path = require("path");
|
||||
const history = require("connect-history-api-fallback");
|
||||
|
||||
const publicPath = path.join(__dirname, "public");
|
||||
|
||||
app = express();
|
||||
app.use("/", express.static(publicPath));
|
||||
app.use(history({ index: "/" }));
|
||||
|
||||
app.use(compression())
|
||||
app.use('/dist', express.static(path.join(__dirname + "/dist")));
|
||||
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'));
|
||||
app.get("/", function (req, res) {
|
||||
res.sendFile(`${publicPath}/index.html`);
|
||||
});
|
||||
|
||||
const port = process.env.PORT || 5001;
|
||||
console.log("Server runnning at port:", port);
|
||||
|
||||
app.listen(port);
|
||||
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
@@ -1,88 +1,97 @@
|
||||
var path = require('path')
|
||||
var webpack = require('webpack')
|
||||
const path = require("path");
|
||||
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 = {
|
||||
entry: './src/main.js',
|
||||
context: path.resolve(__dirname, "src"),
|
||||
entry: "/main.js",
|
||||
output: {
|
||||
path: path.resolve(__dirname, './dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: 'build.js'
|
||||
path: `${publicPath}/dist/`,
|
||||
publicPath: "/dist/",
|
||||
filename: "build.js",
|
||||
clean: true
|
||||
},
|
||||
module: {
|
||||
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$/,
|
||||
loader: 'babel-loader',
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
presets: ['@babel/preset-env']
|
||||
presets: ["@babel/preset-env"]
|
||||
},
|
||||
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)$/,
|
||||
loader: 'file-loader',
|
||||
loader: "file-loader",
|
||||
options: {
|
||||
name: '[name].[ext]'
|
||||
// name: '[name].[ext]?[hash]'
|
||||
name: "[name].[ext]?[hash]"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [new VueLoaderPlugin()],
|
||||
resolve: {
|
||||
extensions: ['.js', '.vue', '.json', 'scss'],
|
||||
extensions: [".js", ".vue", ".json", ".scss"],
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.common.js',
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
'src': path.resolve(__dirname, './src'),
|
||||
'assets': path.resolve(__dirname, './src/assets'),
|
||||
'components': path.resolve(__dirname, './src/components')
|
||||
vue$: "vue/dist/vue.common.js",
|
||||
"@": path.resolve(__dirname, "src"),
|
||||
src: path.resolve(__dirname, "src"),
|
||||
assets: `${publicPath}/assets`,
|
||||
components: path.resolve(__dirname, "src/components")
|
||||
}
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
inline: true,
|
||||
noInfo: true
|
||||
static: publicPath,
|
||||
historyApiFallback: {
|
||||
index: "index.html"
|
||||
},
|
||||
compress: true,
|
||||
port: 8080
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
devtool: 'inline-source-map'
|
||||
optimization: {
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
parallel: true,
|
||||
terserOptions: {
|
||||
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
|
||||
}
|
||||
|
||||
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
|
||||
})
|
||||
])
|
||||
]
|
||||
},
|
||||
devtool: "inline-source-map"
|
||||
};
|
||||
|
||||
if (isProd) {
|
||||
module.exports.mode = "production";
|
||||
module.exports.devtool = false;
|
||||
// module.exports.plugins.push(
|
||||
// new MiniCssExtractPlugin({
|
||||
// filename: "[name].css",
|
||||
// chunkFilename: "[id].css"
|
||||
// })
|
||||
// );
|
||||
}
|
||||
|
||||