adjust webpack process

package.json

@@ -6,7 +6,7 @@
     "type": "git",
     "url": "git+https://github.com/amphineko/amphineko.git"
   },
-  "author": "Naoki Rinmous <sukareki@gmail.com>",
+  "author": "amphineko <sukareki@gmail.com>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/amphineko/amphineko/issues"

src/index.html

@@ -14,8 +14,9 @@
     <div id="container">
         <div class="section header grid-container grid-parent">
             <div class="split picture-container grid-30">
-                <a href="assets/images/amphineko.png">
+                <a href="${require('./assets/images/amphineko.png')}">
-                    <img alt="picture of amphineko" class="picture" src="assets/images/amphineko@1x.jpg">
+                    <img alt="picture of amphineko" class="picture"
+                        src="${require('./assets/images/amphineko@1x.jpg')}">
                 </a>
             </div>
 

src/index.js

@@ -1,2 +0,0 @@
-import './index.html'
-import 'file-loader?name=[path][name].[ext]!./assets/images/amphineko.png'

webpack.config.js

@@ -1,95 +1,63 @@
 const path = require('path')
 
-const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
-module.exports = (env, argv) => {
+module.exports = {
-    const isProduction = argv.mode === 'production'
+    context: path.resolve(__dirname, 'src'),
 
-    console.log(`Using mode ${isProduction ? 'PRODUCTION' : 'DEVELOPMENT'}`)
+    devServer: {
+        contentBase: path.resolve(__dirname, 'dist')
+    },
 
-    return {
+    devtool: 'inline-source-map',
-        context: path.resolve(__dirname, 'src'),
 
-        devServer: {
+    entry: {
-            contentBase: path.resolve(__dirname, 'dist'),
+        index: './index.js',
-            port: 3100,
+    },
-        },
 
-        devtool: 'inline-source-map',
+    module: {
-
+        rules: [
-        mode: isProduction ? 'production' : 'development',
+            {
-
+                test: /\.(jpg|png|svg)$/,
-        entry: {
+                loader: 'file-loader',
-            index: './index.js',
+                options: {
-        },
+                    name: 'assets/images/[name].[contenthash:8].[ext]'
-
+                }
-        module: {
+            },
-            rules: [
+            {
-                {
+                test: /\.(eot|svg|ttf|woff2?)$/,
-                    test: /\.(jpg|png|svg)$/,
+                loader: 'file-loader',
-                    include: [
+                options: {
-                        path.resolve(__dirname, 'src')
+                    name: 'assets/webfonts/[name].[contenthash:8].[ext]'
-                    ],
+                }
-                    use: [
+            },
-                        isProduction ?
+            {
-                            'file-loader?name=[path][name].[contenthash:8].[ext]' :
+                test: /\.(c|sa|sc)ss$/,
-                            'file-loader?name=[path][name].[ext]'
+                use: [
-                    ],
+                    'file-loader?name=[name].[contenthash:8].css',
-                },
+                    'extract-loader',
-                {
+                    {
-                    test: /\.(eot|svg|ttf|woff2?)$/,
+                        loader: 'css-loader',
-                    include: [
+                        options: {
-                        path.resolve(__dirname, 'node_modules')
+                            importLoaders: 1,
-                    ],
-                    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,
-                            },
                         },
-                        'sass-loader',
+                    },
-                    ],
+                    'sass-loader',
-                },
+                ],
-            ],
+            },
-        },
+        ],
+    },
 
-        output: {
+    output: {
-            filename: '[name].[contenthash:8].js',
+        filename: '[name].[contenthash:8].js',
-            path: path.resolve(__dirname, 'dist'),
+        path: path.resolve(__dirname, 'dist'),
-        },
+    },
 
-        plugins: Array.prototype.concat([
+    plugins: [
-            new CleanWebpackPlugin(),
+        new CleanWebpackPlugin(),
-        ], isProduction
+        new HtmlWebpackPlugin({
-            ? []
+            template: 'index.html'
-            : [
+        })
-                new BrowserSyncPlugin({
+    ]
-                    host: 'localhost',
-                    open: false,
-                    proxy: 'http://localhost:3100/',
-                }),
-            ])
-    }
 }