diff --git a/config/env/dev.env.js b/config/env/dev.env.js index 53cd548..b0bebef 100644 --- a/config/env/dev.env.js +++ b/config/env/dev.env.js @@ -1,3 +1,3 @@ module.exports = { - NODE_ENV: "development" + NODE_ENV: 'development' }; diff --git a/config/helpers.js b/config/helpers.js index f0e8466..bb84933 100644 --- a/config/helpers.js +++ b/config/helpers.js @@ -1,8 +1,8 @@ -"use strict"; +'use strict'; -const path = require("path"); +const path = require('path'); -const _root = path.resolve(__dirname, ".."); +const _root = path.resolve(__dirname, '..'); exports.root = function(args) { args = Array.prototype.slice.call(arguments, 0); @@ -11,5 +11,5 @@ exports.root = function(args) { }; exports.assetsPath = function(_path) { - return path.posix.join("static", _path); + return path.posix.join('static', _path); }; diff --git a/config/planetposen.config.js b/config/planetposen.config.js new file mode 100644 index 0000000..30c9608 --- /dev/null +++ b/config/planetposen.config.js @@ -0,0 +1,28 @@ +"use strict"; + +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const helpers = require("./helpers"); + +const VinlottisConfig = { + entry: { + planetposen: ["@babel/polyfill", helpers.root("frontend", "main")] + }, + optimization: { + minimizer: [ + new HtmlWebpackPlugin({ + chunks: ["planetposen"], + filename: "../index.html", + template: "./frontend/index.html", + inject: true, + minify: { + removeComments: true, + collapseWhitespace: false, + preserveLineBreaks: true, + removeAttributeQuotes: true + } + }) + ] + } +}; + +module.exports = VinlottisConfig; diff --git a/config/webpack.config.common.js b/config/webpack.config.common.js index d2484c6..96e0b21 100644 --- a/config/webpack.config.common.js +++ b/config/webpack.config.common.js @@ -2,18 +2,17 @@ const VueLoaderPlugin = require("vue-loader/lib/plugin"); const MiniCSSExtractPlugin = require("mini-css-extract-plugin"); +const HtmlPlugin = require("html-webpack-plugin"); const helpers = require("./helpers"); -const isDev = process.env.NODE_ENV === "development"; + +// const {GenerateSW} = require('workbox-webpack-plugin'); const webpackConfig = function(isDev) { return { - entry: { - main: ["@babel/polyfill", helpers.root("frontend", "main")] - }, resolve: { extensions: [".js", ".vue"], alias: { - vue$: isDev ? "vue/dist/vue.runtime.js" : "vue/dist/vue.runtime.min.js", + vue$: isDev ? "vue/dist/vue.min.js" : "vue/dist/vue.min.js", "@": helpers.root("frontend") } }, @@ -21,13 +20,22 @@ const webpackConfig = function(isDev) { rules: [ { test: /\.vue$/, - loader: "vue-loader", - include: [helpers.root("frontend")] + use: [ + { + loader: "vue-loader", + options: { + loaders: { + scss: "vue-style-loader!css-loader!sass-loader", + sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax" + } + } + } + ] }, { test: /\.js$/, loader: "babel-loader", - include: [helpers.root("frontend")] + include: [helpers.root("src")] }, { test: /\.css$/, @@ -52,41 +60,29 @@ const webpackConfig = function(isDev) { { loader: "sass-loader", options: { sourceMap: isDev } } ] }, - // { - // test: /\.s(c|a)ss$/, - // use: [ - // 'vue-style-loader', - // 'css-loader', - // { - // loader: 'sass-loader', - // // Requires sass-loader@^7.0.0 - // options: { - // implementation: require('sass'), - // fiber: require('fibers'), - // indentedSyntax: true // optional - // }, - // // Requires sass-loader@^8.0.0 - // options: { - // implementation: require('sass'), - // sassOptions: { - // fiber: require('fibers'), - // indentedSyntax: true // optional - // }, - // }, - // }, - // ], - // }, { test: /\.woff(2)?(\?[a-z0-9]+)?$/, - loader: 'url-loader?limit=10000&mimetype=application/font-woff' + loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.(ttf|eot|svg)(\?[a-z0-9]+)?$/, - loader: 'file-loader' + loader: "file-loader" } ] }, - plugins: [new VueLoaderPlugin()] + plugins: [ + new VueLoaderPlugin(), + // new GenerateSW({ + // swSrc: "./public/service-worker.js", + // swDest: './sw.js', + // clientsClaim: true, + // skipWaiting: true, + // runtimeCaching: [{ + // urlPattern: new RegExp('https://www.google-analytics.com/analytics.js'), + // handler: 'StaleWhileRevalidate' + // }] + // }) + ] }; }; diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 747ac29..6922179 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -8,7 +8,7 @@ const helpers = require("./helpers"); const commonConfig = require("./webpack.config.common"); const environment = require("./env/dev.env"); -const webpackConfig = merge(commonConfig(true), { +let webpackConfig = merge(commonConfig(true), { mode: "development", devtool: "cheap-module-eval-source-map", output: { @@ -26,19 +26,29 @@ const webpackConfig = merge(commonConfig(true), { plugins: [ new webpack.EnvironmentPlugin(environment), new webpack.HotModuleReplacementPlugin(), - new FriendlyErrorsPlugin(), - new HtmlPlugin({ template: "frontend/index.html", chunksSortMode: "dependency" }) + new FriendlyErrorsPlugin() ], devServer: { compress: true, historyApiFallback: true, hot: true, overlay: true, - port: 8080, stats: { normal: true } } }); +webpackConfig = merge(webpackConfig, { + entry: { + main: ["@babel/polyfill", helpers.root("src", "vinlottis-init")] + }, + plugins: [ + new HtmlPlugin({ + template: "src/templates/Index.html", + chunksSortMode: "dependency" + }) + ] +}); + module.exports = webpackConfig; diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 17c22d0..d7fccf3 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -1,11 +1,11 @@ "use strict"; +const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const webpack = require("webpack"); const merge = require("webpack-merge"); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const MiniCSSExtractPlugin = require("mini-css-extract-plugin"); const UglifyJSPlugin = require("uglifyjs-webpack-plugin"); -const CompressionPlugin = require("compression-webpack-plugin"); const helpers = require("./helpers"); const commonConfig = require("./webpack.config.common"); const isProd = process.env.NODE_ENV === "production"; @@ -16,11 +16,22 @@ const environment = isProd const webpackConfig = merge(commonConfig(false), { mode: "production", output: { - path: helpers.root("dist"), - publicPath: "/", - filename: "js/[name].bundle.js" + path: helpers.root("public/dist"), + publicPath: "/dist/", + filename: "js/[name].bundle.[hash:7].js" + //filename: 'js/[name].bundle.js' }, optimization: { + splitChunks: { + cacheGroups: { + styles: { + name: "styles", + test: /\.css$/, + chunks: "all", + enforce: true + } + } + }, minimizer: [ new OptimizeCSSAssetsPlugin({ cssProcessorPluginOptions: { @@ -35,9 +46,10 @@ const webpackConfig = merge(commonConfig(false), { ] }, plugins: [ + new CleanWebpackPlugin(), new webpack.EnvironmentPlugin(environment), new MiniCSSExtractPlugin({ - filename: "css/[name].css" + filename: "css/[name].[hash:7].css" }) ] }); diff --git a/webpack.config.js b/webpack.config.js index ff7814f..7d74af6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,9 +1,11 @@ "use strict"; const environment = (process.env.NODE_ENV || "development").trim(); +const merge = require("webpack-merge"); if (environment === "development") { module.exports = require("./config/webpack.config.dev"); } else { - module.exports = require("./config/webpack.config.prod"); -} \ No newline at end of file + let prodConfig = require("./config/webpack.config.prod"); + module.exports = merge(prodConfig, require("./config/planetposen.config.js")); +}