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,25 +1,17 @@
 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'
-
-    console.log(`Using mode ${isProduction ? 'PRODUCTION' : 'DEVELOPMENT'}`)
-
-    return {
     context: path.resolve(__dirname, 'src'),
 
     devServer: {
-            contentBase: path.resolve(__dirname, 'dist'),
+        contentBase: path.resolve(__dirname, 'dist')
-            port: 3100,
     },
 
     devtool: 'inline-source-map',
 
-        mode: isProduction ? 'production' : 'development',
-
     entry: {
         index: './index.js',
     },
@@ -28,40 +20,22 @@ module.exports = (env, argv) => {
         rules: [
             {
                 test: /\.(jpg|png|svg)$/,
-                    include: [
+                loader: 'file-loader',
-                        path.resolve(__dirname, 'src')
+                options: {
-                    ],
+                    name: 'assets/images/[name].[contenthash:8].[ext]'
-                    use: [
+                }
-                        isProduction ?
-                            'file-loader?name=[path][name].[contenthash:8].[ext]' :
-                            'file-loader?name=[path][name].[ext]'
-                    ],
             },
             {
                 test: /\.(eot|svg|ttf|woff2?)$/,
-                    include: [
+                loader: 'file-loader',
-                        path.resolve(__dirname, 'node_modules')
+                options: {
-                    ],
+                    name: 'assets/webfonts/[name].[contenthash:8].[ext]'
-                    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].[contenthash:8].css' :
-                            'file-loader?name=[name].css',
                     'extract-loader',
                     {
                         loader: 'css-loader',
@@ -80,16 +54,10 @@ module.exports = (env, argv) => {
         path: path.resolve(__dirname, 'dist'),
     },
 
-        plugins: Array.prototype.concat([
+    plugins: [
         new CleanWebpackPlugin(),
-        ], isProduction
+        new HtmlWebpackPlugin({
-            ? []
+            template: 'index.html'
-            : [
+        })
-                new BrowserSyncPlugin({
+    ]
-                    host: 'localhost',
-                    open: false,
-                    proxy: 'http://localhost:3100/',
-                }),
-            ])
-    }
 }