ADD: devtool eval sourcemap, example of implementation of an image

Author: SoldierCorp

build/webpack.config.js

@@ -24,6 +24,7 @@ module.exports = (env) => {
   return {
     mode: MODE,
     target: 'web',
+    devtool: 'eval-source-map',
     context: path.join(__dirname, '../src'),
     entry: {
       app: path.join(__dirname, '../src/app.js'),

package.json

@@ -1,14 +1,14 @@
 {
-  "name": "my-project",
+  "name": "webpackp-starter",
   "version": "0.0.1",
-  "description": "My project description",
+  "description": "Webpack 5 starter that supports Pug, SASS, ES6 ES7 ES8 ES9 ES10 ES11 ES12, VanillaJS/jQuery... (without framework) and generate URLs without the .html extension.",
   "author": {
     "name": "Edgardo Ramírez León",
     "email": "me@edgardo.com",
     "url": "https://edgardorl.com"
   },
-  "main": "app.js",
-  "repository": "git@github.com:my-user/my-repo.git",
+  "main": "src/app.js",
+  "repository": "git@github.com:SoldierCorp/webpack-starter-pug-sass-es6-jquery.git",
   "license": "MIT",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

src/assets/images/image.png

@@ -35,3 +35,7 @@ ul {
 li {
   list-style: none;
 }
+
+.image {
+  width: 50px;
+}

src/assets/styles/layout/_general.scss

@@ -1,6 +1,8 @@
 mixin menu(currentPage)
   nav.menu
     ul.menu__ul.ml-auto
+      li.menu__item
+        img(src=require('images/image.png'), alt="", title="", class="image")
       li.menu__item
         a.menu__link(href='/', class=currentPage === 'home' ? 'active' : '') Home
       li.menu__item

src/views/components/menu.pug

@@ -9,8 +9,8 @@ block basicSeo
   meta(name='author' content='')
 
 block manifestBrowserconfigFiles
-  link(href='../manifest.json', rel='manifest')
-  meta(name='msapplication-config' content='../browserconfig.xml')
+  link(href='../../manifest.json', rel='manifest')
+  meta(name='msapplication-config' content='../../browserconfig.xml')
 
 block content