refactor webpack config

bower.json

@@ -1,25 +0,0 @@
-{
-  "name": "amphineko",
-  "description": "",
-  "main": "index.html",
-  "keywords": [
-    "home"
-  ],
-  "authors": [
-    "Naoki Rinmous <sukareki@gmail.com>"
-  ],
-  "license": "MIT",
-  "homepage": "https://futa.moe/amphineko/",
-  "private": true,
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ],
-  "dependencies": {
-    "unsemantic": "^1.1.3",
-    "font-awesome": "^4.7.0"
-  }
-}

gulpfile.js

@@ -1,22 +0,0 @@
-const cleanCss = require('gulp-clean-css')
-const gulp = require('gulp')
-const rename = require('gulp-rename')
-const sass = require('gulp-sass')
-
-gulp.task('stylesheet', function () {
-    return gulp.src('./assets/stylesheets/index.scss')
-        .pipe(sass().on('error', sass.logError))
-        .pipe(rename('index.bundle.css'))
-        .pipe(gulp.dest('./assets/stylesheets/'))
-        .pipe(cleanCss({
-            level: 2
-        }))
-        .pipe(rename('index.bundle.min.css'))
-        .pipe(gulp.dest('./assets/stylesheets/'))
-})
-
-gulp.task('default', gulp.series('stylesheet'))
-
-gulp.task('watch', gulp.series('default', function () {
-    gulp.watch('./assets/stylesheets/**/*.scss', gulp.series('stylesheet'))
-}))

src/assets/stylesheets/fontawesome/_animated.scss

@@ -1,20 +0,0 @@
-// Animated Icons
-// --------------------------
-
-.#{$fa-css-prefix}-spin {
-  animation: fa-spin 2s infinite linear;
-}
-
-.#{$fa-css-prefix}-pulse {
-  animation: fa-spin 1s infinite steps(8);
-}
-
-@keyframes fa-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}

src/assets/stylesheets/fontawesome/_bordered-pulled.scss

@@ -1,20 +0,0 @@
-// Bordered & Pulled
-// -------------------------
-
-.#{$fa-css-prefix}-border {
-  border: solid .08em $fa-border-color;
-  border-radius: .1em;
-  padding: .2em .25em .15em;
-}
-
-.#{$fa-css-prefix}-pull-left { float: left; }
-.#{$fa-css-prefix}-pull-right { float: right; }
-
-.#{$fa-css-prefix},
-.fas,
-.far,
-.fal,
-.fab {
-  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
-  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
-}

src/assets/stylesheets/fontawesome/_core.scss

@@ -1,20 +0,0 @@
-// Base Class Definition
-// -------------------------
-
-.#{$fa-css-prefix},
-.fas,
-.far,
-.fal,
-.fab {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  text-rendering: auto;
-  line-height: 1;
-}
-
-%fa-icon {
-  @include fa-icon;
-}

src/assets/stylesheets/fontawesome/_fixed-width.scss

@@ -1,6 +0,0 @@
-// Fixed Width Icons
-// -------------------------
-.#{$fa-css-prefix}-fw {
-  text-align: center;
-  width: $fa-fw-width;
-}

src/assets/stylesheets/fontawesome/_larger.scss

@@ -1,23 +0,0 @@
-// Icon Sizes
-// -------------------------
-
-// makes the font 33% larger relative to the icon container
-.#{$fa-css-prefix}-lg {
-  font-size: (4em / 3);
-  line-height: (3em / 4);
-  vertical-align: -.0667em;
-}
-
-.#{$fa-css-prefix}-xs {
-  font-size: .75em;
-}
-
-.#{$fa-css-prefix}-sm {
-  font-size: .875em;
-}
-
-@for $i from 1 through 10 {
-  .#{$fa-css-prefix}-#{$i}x {
-    font-size: $i * 1em;
-  }
-}

src/assets/stylesheets/fontawesome/_list.scss

@@ -1,18 +0,0 @@
-// List Icons
-// -------------------------
-
-.#{$fa-css-prefix}-ul {
-  list-style-type: none;
-  margin-left: $fa-li-width * 5/4;
-  padding-left: 0;
-
-  > li { position: relative; }
-}
-
-.#{$fa-css-prefix}-li {
-  left: -$fa-li-width;
-  position: absolute;
-  text-align: center;
-  width: $fa-li-width;
-  line-height: inherit;
-}

src/assets/stylesheets/fontawesome/_mixins.scss

@@ -1,57 +0,0 @@
-// Mixins
-// --------------------------
-
-@mixin fa-icon {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-  line-height: 1;
-  vertical-align: -.125em;
-}
-
-@mixin fa-icon-rotate($degrees, $rotation) {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
-  transform: rotate($degrees);
-}
-
-@mixin fa-icon-flip($horiz, $vert, $rotation) {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
-  transform: scale($horiz, $vert);
-}
-
-
-// Only display content to screen readers. A la Bootstrap 4.
-//
-// See: http://a11yproject.com/posts/how-to-hide-content/
-
-@mixin sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-// Use in conjunction with .sr-only to only display content when it's focused.
-//
-// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
-//
-// Credit: HTML5 Boilerplate
-
-@mixin sr-only-focusable {
-  &:active,
-  &:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto;
-  }
-}

src/assets/stylesheets/fontawesome/_rotated-flipped.scss

@@ -1,23 +0,0 @@
-// Rotated & Flipped Icons
-// -------------------------
-
-.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
-.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
-.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
-
-.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
-.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
-.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); }
-
-// Hook for IE8-9
-// -------------------------
-
-:root {
-  .#{$fa-css-prefix}-rotate-90,
-  .#{$fa-css-prefix}-rotate-180,
-  .#{$fa-css-prefix}-rotate-270,
-  .#{$fa-css-prefix}-flip-horizontal,
-  .#{$fa-css-prefix}-flip-vertical {
-    filter: none;
-  }
-}

src/assets/stylesheets/fontawesome/_screen-reader.scss

@@ -1,5 +0,0 @@
-// Screen Readers
-// -------------------------
-
-.sr-only { @include sr-only; }
-.sr-only-focusable { @include sr-only-focusable; }

src/assets/stylesheets/fontawesome/_stacked.scss

@@ -1,31 +0,0 @@
-// Stacked Icons
-// -------------------------
-
-.#{$fa-css-prefix}-stack {
-  display: inline-block;
-  height: 2em;
-  line-height: 2em;
-  position: relative;
-  vertical-align: middle;
-  width: ($fa-fw-width*2);
-}
-
-.#{$fa-css-prefix}-stack-1x,
-.#{$fa-css-prefix}-stack-2x {
-  left: 0;
-  position: absolute;
-  text-align: center;
-  width: 100%;
-}
-
-.#{$fa-css-prefix}-stack-1x {
-  line-height: inherit;
-}
-
-.#{$fa-css-prefix}-stack-2x {
-  font-size: 2em;
-}
-
-.#{$fa-css-prefix}-inverse {
-  color: $fa-inverse;
-}

src/assets/stylesheets/fontawesome/brands.scss

@@ -1,21 +0,0 @@
-/*!
- * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@import 'variables';
-
-@font-face {
-  font-family: 'Font Awesome 5 Brands';
-  font-style: normal;
-  font-weight: normal;
-  src: url('#{$fa-font-path}/fa-brands-400.eot');
-  src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
-  url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
-}
-
-.fab {
-  font-family: 'Font Awesome 5 Brands';
-}

src/assets/stylesheets/fontawesome/fontawesome.scss

@@ -1,16 +0,0 @@
-/*!
- * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@import 'variables';
-@import 'mixins';
-@import 'core';
-@import 'larger';
-@import 'fixed-width';
-@import 'list';
-@import 'bordered-pulled';
-@import 'animated';
-@import 'rotated-flipped';
-@import 'stacked';
-@import 'icons';
-@import 'screen-reader';

src/assets/stylesheets/fontawesome/regular.scss

@@ -1,22 +0,0 @@
-/*!
- * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@import 'variables';
-
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-style: normal;
-  font-weight: 400;
-  src: url('#{$fa-font-path}/fa-regular-400.eot');
-  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
-  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
-}
-
-.far {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 400;
-}

src/assets/stylesheets/fontawesome/solid.scss

@@ -1,23 +0,0 @@
-/*!
- * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@import 'variables';
-
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-style: normal;
-  font-weight: 900;
-  src: url('#{$fa-font-path}/fa-solid-900.eot');
-  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
-  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
-}
-
-.fa,
-.fas {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 900;
-}

src/assets/stylesheets/fontawesome/v4-shims.scss

@@ -1,6 +0,0 @@
-/*!
- * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@import 'variables';
-@import 'shims';

src/index.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <link href="index.css" rel="stylesheet">
+    <link href="${require('./index.scss')}" rel="stylesheet">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
     <meta http-equiv="Content-Security-Policy"

src/index.js

@@ -1,2 +1,2 @@
-require('html-loader!./index.html')
-require('sass-loader?name=[name].[ext]!./assets/stylesheets/index.scss')
+require('./index.html')
+require('file-loader?name=[path][name].[ext]!./assets/images/amphineko.png')

src/index.scss

@@ -1,19 +1,15 @@
-@import "fontawesome/fontawesome.scss";
-@import "fontawesome/brands.scss";
-@import "fontawesome/regular.scss";
-@import "fontawesome/solid.scss";
-@import "../../../node_modules/unsemantic/assets/sass/unsemantic-grid-responsive.scss";
+@import "~@fortawesome/fontawesome-free/css/all.min.css";
+@import "~unsemantic/assets/sass/unsemantic-grid-responsive.scss";
 
-@import "footer.scss";
-@import "header.scss";
-@import "identities.scss";
-@import "intro.scss";
-@import "labels.scss";
-
-@import "chem-elements.scss";
+@import "stylesheets/chem-elements.scss";
+@import "stylesheets/footer.scss";
+@import "stylesheets/header.scss";
+@import "stylesheets/identities.scss";
+@import "stylesheets/intro.scss";
+@import "stylesheets/labels.scss";
 
 body {
-    background: url('../images/header-background.svg') #466685;
+    background: url('./assets/images/header-background.svg') #466685;
     background-size: cover;
 
     font-size: 1em;
@@ -61,4 +57,4 @@ $section-border-radius: 2em;
 
 .identities .small-labels .group::before, .identities .small-labels .label::before {
     color: #333;
-}
+}

webpack.config.js

@@ -1,65 +1,81 @@
 const path = require('path')
 
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
-const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
-module.exports = {
-    context: path.resolve(__dirname, 'src'),
+module.exports = (env, argv) => {
+    const isProduction = argv.mode === 'production'
 
-    entry: {
-        index: './index.js',
-    },
+    return {
+        context: path.resolve(__dirname, 'src'),
 
-    module: {
-        rules: [
-            {
-                test: /\.(eot|jpg|png|svg|ttf|woff2?)$/,
-                loader: 'file-loader',
-                options: {
-                    name: '[path][name].[ext]',
+        mode: isProduction ? 'production' : 'development',
+
+        entry: {
+            index: './index.js',
+        },
+
+        module: {
+            rules: [
+                {
+                    test: /\.(jpg|png|svg)$/,
+                    include: [
+                        path.resolve(__dirname, 'src')
+                    ],
+                    use: [
+                        isProduction ?
+                            'file-loader?name=[path][name].[contenthash:8].[ext]' :
+                            'file-loader?name=[path][name].[ext]'
+                    ],
                 },
-            },
-            {
-                test: /\.(html)$/,
-                use: [
-                    'file-loader?name=[name].[ext]',
-                    'extract-loader',
-                    {
-                        loader: 'html-loader',
-                        options: {
-                            minimize: true,
-                            removeComments: false,
-                            collapseWhitespace: false
+                {
+                    test: /\.(eot|svg|ttf|woff2?)$/,
+                    include: [
+                        path.resolve(__dirname, 'node_modules')
+                    ],
+                    use: [
+                        isProduction ?
+                            'file-loader?name=assets/webfonts/[name].[contenthash:8].[ext]' :
+                            'file-loader?name=assets/webfonts/[name].[ext]'
+                    ],
+                },
+                {
+                    test: /\.(html)$/,
+                    use: [
+                        'file-loader?name=[name].[ext]',
+                        'extract-loader',
+                        'html-loader?interpolate',
+                    ],
+                },
+                {
+                    test: /\.(c|sa|sc)ss$/,
+                    use: [
+                        isProduction ?
+                            'file-loader?name=[name].[contenthash:8].css' :
+                            'file-loader?name=[name].css',
+                        'extract-loader',
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                            },
                         },
-                    },
-                ],
-            },
-            {
-                test: /\.(c|sa|sc)ss$/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    'css-loader',
-                    'resolve-url-loader',
-                    "sass-loader",
-                ],
-            },
+                        'sass-loader',
+                    ],
+                },
+            ],
+        },
+
+        output: {
+            filename: '[name].[contenthash:8].js',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        plugins: [
+            new BrowserSyncPlugin({
+                host: 'localhost',
+                server: { baseDir: ['dist'] },
+            })
         ],
-    },
-
-    output: {
-        filename: 'index.bundle.js',
-        path: path.resolve(__dirname, 'dist'),
-    },
-
-    plugins: [
-        new BrowserSyncPlugin({
-            host: 'localhost',
-            port: 3000,
-            server: { baseDir: ['dist'] },
-        }),
-        new MiniCssExtractPlugin({
-            chunkFilename: '[id].css',
-            filename: '[name].css',
-        }),
-    ],
+    }
 }