Separate development and production build.

.drone.yml

@@ -9,4 +9,4 @@ steps:
   - name: build
     image: node:12
     commands:
-      - npm run build
+      - npm run build:prod

index.html

@@ -22,13 +22,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <meta name="apple-mobile-web-app-title" content="Bärneruhr"/>
     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"/>
     <link rel="stylesheet" type="text/css" href="dist/assets/uhr.css"/>
-    <link rel="stylesheet" type="text/css" href="dist/assets/uhr-black.css" data-class="black" data-name="Schwarz"/>
+    <link rel="stylesheet" type="text/css" href="dist/assets/uhr-black.css" data-class="black"
-    <link rel="stylesheet" type="text/css" href="css/uhr-white.css" data-class="white" data-name="Weiss"/>
+          data-name="Schwarz"/>
-    <link rel="stylesheet" type="text/css" href="css/uhr-red.css" data-class="red" data-name="Rot"/>
+    <link rel="stylesheet" type="text/css" href="dist/assets/uhr-white.css" data-class="white"
-    <link rel="stylesheet" type="text/css" href="css/uhr-yellow.css" data-class="yellow" data-name="Gelb"/>
+          data-name="Weiss"/>
-    <link rel="stylesheet" type="text/css" href="css/uhr-green.css" data-class="green" data-name="Grün"/>
+    <link rel="stylesheet" type="text/css" href="dist/assets/uhr-red.css" data-class="red" data-name="Rot"/>
-    <link rel="stylesheet" type="text/css" href="css/uhr-blue.css" data-class="blue" data-name="Blau"/>
+    <link rel="stylesheet" type="text/css" href="dist/assets/uhr-yellow.css" data-class="yellow"
-    <link rel="stylesheet" type="text/css" href="css/uhr-pink.css" data-class="pink" data-name="Pink"/>
+          data-name="Gelb"/>
+    <link rel="stylesheet" type="text/css" href="dist/assets/uhr-green.css" data-class="green"
+          data-name="Grün"/>
+    <link rel="stylesheet" type="text/css" href="dist/assets/uhr-blue.css" data-class="blue"
+          data-name="Blau"/>
+    <link rel="stylesheet" type="text/css" href="dist/assets/uhr-pink.css" data-class="pink"
+          data-name="Pink"/>
     <link rel="shortcut icon" type="image/png" href="resources/favicon.png"/>
     <link rel="apple-touch-icon-precomposed" href="resources/apple-touch-icon-precomposed.png"/>
     <script

info/index.html

@@ -18,9 +18,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <title>Die Zeit im Wort - Informationen</title>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1"/>
-    <link rel="stylesheet" type="text/css" href="../css/uhr.css"/>
+    <link rel="stylesheet" type="text/css" href="../dist/assets/uhr.css"/>
-    <link rel="stylesheet" type="text/css" href="../css/uhr-black.css" data-class="black"/>
+    <link rel="stylesheet" type="text/css" href="../dist/assets/uhr-black.css" data-class="black"/>
-    <link rel="stylesheet" type="text/css" href="../css/uhr-red.css" data-class="red"/>
+    <link rel="stylesheet" type="text/css" href="../dist/assets/uhr-red.css" data-class="red"/>
     <link rel="stylesheet" type="text/css" href="info.css"/>
     <link rel="shortcut icon" type="image/png" href="../resources/favicon.png"/>
     <script

package.json

@@ -23,8 +23,9 @@
     ],
     "license": "GPL-3.0",
     "scripts": {
-        "build-debug": "webpack -d",
+        "start": "webpack-dev-server --open --config webpack.dev.js",
-        "build": "webpack"
+        "build": "webpack --mode development --env development --config webpack.dev.js",
+        "build:prod": "webpack -p --mode production --env production --config webpack.prod.js"
     },
     "dependencies": {
         "jquery": "3.4.1",
@@ -52,6 +53,8 @@
         "ts-loader": "5.4.5",
         "typescript": "3.4.5",
         "webpack": "4.30.0",
-        "webpack-cli": "3.3.1"
+        "webpack-cli": "3.3.1",
+        "webpack-dev-server": "3.3.1",
+        "webpack-merge": "4.2.1"
     }
 }

webpack.common.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 
-module.exports = {
+module.exports = (env, argv) => ({
     entry: {
         uhr: './src/index.ts',
         style_main: require.resolve('./resources/styles/uhr.scss'),
@@ -14,8 +14,6 @@ module.exports = {
         style_yellow: require.resolve('./css/uhr-yellow.css')
 
     },
-    // devtool: 'inline-source-map',
-    mode: 'production',
     module: {
         rules: [
             {
@@ -35,32 +33,35 @@ module.exports = {
                     }
                 ]
             },
-
-            //////
-
             {
                 test: /\.s?css$/,
-                use: [
+                use: argv.mode !== 'production' ?
-                    {
+                    [
-                        loader: 'file-loader',
+                        'style-loader',
-                        options: {
+                        'css-loader',
-                            name: 'assets/[name].css'
+                        'sass-loader'
+                    ] :
+                    [
+                        {
+                            loader: 'file-loader',
+                            options: {
+                                name: 'assets/[name].css'
+                            }
+                        },
+                        {
+                            loader: 'extract-loader',
+                            options: {
+                                publicPath: '../',
+                            }
+                        },
+                        'css-loader',
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                outputStyle: 'compressed'
+                            }
                         }
-                    },
+                    ]
-                    {
-                        loader: 'extract-loader',
-                        options: {
-                            publicPath: '../',
-                        }
-                    },
-                    'css-loader',
-                    {
-                        loader: 'sass-loader',
-                        options: {
-                            outputStyle: 'compressed'
-                        }
-                    }
-                ]
             },
             // {
             //     test: /\.s?css$/,
@@ -80,16 +81,15 @@ module.exports = {
     },
     plugins: [
         new CleanWebpackPlugin({
-            dry: false,
+            cleanAfterEveryBuildPatterns: ['**/*.deleteme'],
-            cleanAfterEveryBuildPatterns: ['**/deleteme_*.del'],
+            protectWebpackAssets: false
-            dangerouslyAllowCleanPatternsOutsideProject: false
         })
     ],
     resolve: {
         extensions: ['.tsx', '.ts', '.js']
     },
     output: {
-        filename: (chunkData) => chunkData.chunk.name === 'uhr' ? 'uhr.js' : 'deleteme_[name].del',
+        filename: (chunkData) => chunkData.chunk.name === 'uhr' ? 'uhr.js' : '[name].deleteme',
         library: 'uhr',
         path: path.resolve(__dirname, 'dist')
     },
@@ -97,4 +97,4 @@ module.exports = {
         jquery: 'jQuery',
         'js-cookie': 'Cookies'
     }
-};
+});

webpack.dev.js

@@ -0,0 +1,10 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = (env, argv) => merge(common(env, argv), {
+    mode: 'development',
+    devtool: 'inline-source-map',
+    devServer: {
+        contentBase: './dist'
+    }
+});

webpack.prod.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = (env, argv) => merge(common(env, argv), {
+    mode: 'production',
+    devtool: 'source-map'
+});