diff --git a/index.html b/index.html index 3443f03..2839764 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,6 @@ - - - - - Minesweeper @@ -22,9 +17,9 @@ gtag('config', 'UA-113797180-1'); - - - + + +
@@ -38,7 +33,7 @@
- + diff --git a/package-lock.json b/package-lock.json index ce923b8..5aac813 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2022,6 +2022,28 @@ "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==" }, + "file-loader": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-5.0.2.tgz", + "integrity": "sha512-QMiQ+WBkGLejKe81HU8SZ9PovsU/5uaLo0JdTCEXOYv7i7jfAjHZi1tcwp9tSASJPOmmHZtbdCervFmXMH/Dcg==", + "dev": true, + "requires": { + "loader-utils": "^1.2.3", + "schema-utils": "^2.5.0" + }, + "dependencies": { + "schema-utils": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.1.tgz", + "integrity": "sha512-0WXHDs1VDJyo+Zqs9TKLKyD/h7yDpHUhEFsM2CzkICFdoX1av+GBq/J2xRTFfsQO5kBfhZzANf2VcIm84jqDbg==", + "dev": true, + "requires": { + "ajv": "^6.10.2", + "ajv-keywords": "^3.4.1" + } + } + } + }, "fill-range": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", diff --git a/package.json b/package.json index a67a7eb..9c8cf38 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "src/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "start": "http-server .", + "start": "http-server ./dist/", "watch:dev": "node ./node_modules/webpack/bin/webpack.js --watch --mode development .", "buildprod": "node ./node_modules/webpack/bin/webpack.js --mode production ." }, @@ -17,6 +17,7 @@ }, "devDependencies": { "css-loader": "^3.3.0", + "file-loader": "^5.0.2", "http-server": "^0.12.0", "mini-css-extract-plugin": "^0.8.0", "optimize-css-assets-webpack-plugin": "^5.0.3", diff --git a/favicon.ico b/src/assets/favicon.ico similarity index 100% rename from favicon.ico rename to src/assets/favicon.ico diff --git a/src/index.js b/src/index.js index 1f538c2..40d4a0a 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ */ import './index.css'; import './services/loading/loading.css'; +import './assets/favicon.ico'; import { Minesweeper } from './minesweeper.js'; /** start the game **/ diff --git a/webpack.config.js b/webpack.config.js index 5b9bfc1..542952f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,3 +1,4 @@ +const FileSystem = require('fs'); const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const TerserJSPlugin = require('terser-webpack-plugin'); @@ -8,7 +9,7 @@ module.exports = { main: './src/index.js', }, output: { - filename: '[name].bundle.js', + filename: '[name].[contenthash].js', path: path.resolve(__dirname, 'dist'), }, optimization: { @@ -21,10 +22,37 @@ module.exports = { new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // all options are optional - filename: '[name].bundle.css', + filename: '[name].[contenthash].css', chunkFilename: '[id].css', ignoreOrder: false, // Enable to remove warnings about conflicting order }), + function() { + this.plugin('done', function(statsData) { + var stats = statsData.toJson(); + + if (!stats.errors.length) { + var htmlFileName = 'index.html'; + var html = FileSystem.readFileSync(path.join(__dirname, htmlFileName), 'utf8'); + + console.log(stats.assetsByChunkName.main); + var htmlOutput = html.replace( + /vendors~main.bundle.js/i, + stats.assetsByChunkName['vendors~main']); + + htmlOutput = htmlOutput.replace( + /main.bundle.css/i, + stats.assetsByChunkName.main[0]); + + htmlOutput = htmlOutput.replace( + /main.bundle.js/i, + stats.assetsByChunkName.main[1]); + + FileSystem.writeFileSync( + path.join(__dirname, 'dist', htmlFileName), + htmlOutput); + } + }) + } ], module: { @@ -38,6 +66,17 @@ module.exports = { 'css-loader', ], }, + { + test: /\.(png|jpe?g|gif|ico)$/i, + use: [ + { + loader: 'file-loader', + options: { + name: 'assets/[name].[ext]', + }, + }, + ], + }, ], }, }; \ No newline at end of file