and the reload of the page also failed.

I just cloned this boilerplate, changed this file :

src/index.js :

(async() => {
    console.log("Yeah");
})()

then run npm run start and it does not work in the browser with this error :

index.js:1 Uncaught ReferenceError: regeneratorRuntime is not defined
    at Object../src/index.js (index.js:1)
    at __webpack_require__ (bootstrap:725)
    at fn (bootstrap:100)
    at Object.0 (main.bundle.js:10772)
    at __webpack_require__ (bootstrap:725)
    at bootstrap:792
    at bootstrap:792

Is something wrong with async function ?

Thanks !

...however, the webpack.dev.js script anyway seems to mix up the folder, where static assets are served from (usually "public") and the location from which the project is supposed to be served ("dist").

Or the "paths.build" reference is wrong and should read "paths.public" instead.

Thanks for your boiler plate. It would be nice to have also a loader for images from _.scss files

this simply does not work.

 background-image: url('./images/copy3.png');

dev and prod both require common configuration by calling it with the extension, making ESLint complain. You can remove the complaint by removing the extension in both files, like this:

const common = require('./webpack.common')

I have a static html page that needs to load the built css and js. Running npm run start loads all proper resource, however when building the prod script,npm run build, all resources (js, css, images) cannot be found. The app builds with no errors and I see all the dist files. It seems that there is an issue with my pathing configuration -- the html references /js/script.js instead of js/scripts.js.

Would you have any pointers?

Hi @taniarascia,

Thank you for your Project.

I have checked out the actual master branch and installed all dependencies. Afterward, I started the project with npm start.
The hot module reloader does not react to changes to the JS files, SCSS files, and HTML files.

Hi, thanks for the great tutorial. I was following it and also cloned this repo. In both cases, I get

Cannot apply update. Need to do a full reload!
[HMR] Aborted because ./src/index.js is not accepted

whenever I make some changes to src/index.js. Changes to a /src/style.css file are properly reflected and reloaded.
When running npm i, I get a found 12 vulnerabilities (2 low, 4 moderate, 4 high, 2 critical) that can be fixed with npm audit fix, but doesn't change things related to HMR.

I am using nodejs version 14.16.1 and npm version 6.14.12. Any pointers? Thanks a lot!

Full console output is below.

[HMR] Cannot apply update. Need to do a full reload! [log.js:26:11](webpack://webpack-boilerplate/node_modules/webpack/hot/log.js)
[HMR] Aborted because ./src/index.js is not accepted
Update propagation: ./src/index.js
applyHandler@http://localhost:8080/main.bundle.js:10649:31
internalApply/results<@http://localhost:8080/main.bundle.js:10364:21
internalApply@http://localhost:8080/main.bundle.js:10363:54
hotCheck/</</</<@http://localhost:8080/main.bundle.js:10337:26
waitForBlockingPromises@http://localhost:8080/main.bundle.js:10290:55
hotCheck/</</<@http://localhost:8080/main.bundle.js:10335:24
promise callback*hotCheck/</<@http://localhost:8080/main.bundle.js:10334:18
promise callback*hotCheck/<@http://localhost:8080/main.bundle.js:10313:43
promise callback*hotCheck@http://localhost:8080/main.bundle.js:10304:15
check@http://localhost:8080/main.bundle.js:9168:16
./node_modules/webpack/hot/dev-server.js/<@http://localhost:8080/main.bundle.js:9205:7
emit@http://localhost:8080/main.bundle.js:547:17
reloadApp@http://localhost:8080/main.bundle.js:9090:67
ok@http://localhost:8080/main.bundle.js:7276:68
./node_modules/webpack-dev-server/client/socket.js/initSocket/<@http://localhost:8080/main.bundle.js:8822:29
./node_modules/webpack-dev-server/client/clients/WebSocketClient.js/onMessage/this.client.onmessage@http://localhost:8080/main.bundle.js:7128:10

What happen?:

I cloned this repo as a template， and then I did the "npm run start" script then type a <h1>123123</h1> tag in index.html #root element, and saved the file but found nothing happened.

Expected behavior:

page should show the change right after I change and save index.html.

I found this bug in my own built boilerplate, too. so I came here to see if I can find any solution, but seems I am not lucky :(

I want to use this boilerplate with electron...

I'm beginner of webpack...

can you make it? for just like poor me ioi

I tested to work through aliases and it does not work.

For example:

resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src'),
    },
  },

Could you help me?

Hi,

I notice that in the README it is written : You can view the development server at localhost:3000. but in dev server config the port is 8080. Nothing serious but it doesn't cost anything to update the README.

Thanks for this extra nice boilerplate!

{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: false,
modules: false, // prod, maybe is false
},
},

非常纯净的一款框架，项目可以根据这个基础框架进行调整，节约不少时间

If you try to add an image directly to the HTML it won't be processed by webpack and won't be displayed, for instance you can add the following to your template.html file

./src/template.html

  <body>
    <div id="root"></div>
    <img src="./images/webpack-logo.svg" />
  </body>

When it runs it should display to webpack logos, but you get this (if you scroll down):

I think it would be a good idea to add html-loader to the boiler plate config.

I'm going to raise a pull request pointing the possible solution

Hello,

When I add styles to classes and IDs in my SCSS files they don't render but if I add styles to tags(h1, dic, etc.) they do render.

Screenshot

Has anyone else experienced something similar to this?

Issue

• Setup lint configuration (prettier and eslint) for developers to adhere to best practices following popular style guide (default is set to airbnb-base)
• Availability of npm run lint command to quickly go through warnings/cautions before pushing a feature to production after a staging review is approved

Pitch

• Do you feel this improvement can be helpful for audience?

Possible Solution

• If above pitch sounds reasonable, see recent commits, clone this repo for a quick test and let me know if you would like to see a PR for this
• In case if these add-ons bring extra overhead code and complicate things, feel free to close this issue

using the default repo, i tried to place an anchor in template.html <a href="page/about.html">"clicke me</a> when i run npm start and after clicking the linked page following is what i get Cannot GET /page/about.html how can i add linked static pages to the dev and prod build, thank you in advance.

note: i created page folder in src and kept all my refrenced pages.

When you run the build command, and serve the html in dist folder, apart from the contents in the html file alone, it can't find any other resource either it be js files or css files; here you can see a screenshot of the console after page load:

excuses my beginner question,

If I added any image to my html <img src="./images/example.jpg" alt=""> I'm always getting a 404 error
do I have to import all the images I want to use in js ?

Hi, nice work!

Could you please add feature for injecting svg icons into html?

I'm using wsl2 on windows 10 npm start doesn't change anything scripts, styles, html nothing is reloading, i was reading that this is intended not to reload just for the html files
can you guide me through possible fixes ?

node v14.15.0
npm v6.14.8

• i've tried node v15 same issue

Hi,

If I start separating my .scss files into folders, the urls of background-images start getting messed up on production, referring to a root that is often not the folder where the website is.

First line of dev conf requires webpack var but never uses it. If you remove that ESLint doesn't complain anymore and it still compiles:
const webpack = require('webpack')

Hi. Is it possible to create several JS builds for each subpage of the project separately?

I tested on the main code without changing anything the inter font is not being copied to dist folder after building
also the 2 js files are not minified, sorry for too many questions.

by creating a .nvmrc file with the correct node version, nvm will switch to the correct one automatically and lock it so the setup will work even with newer versions.

The code in folder root is
node -v >.nvmrc

Hey Tania,
I Noted 👇🏽on the README.

It's an assumption that everyone knows http-server and has installed it globally.

First of all, thank you for your efforts. Your blog post about webpack configuration helped me a lot.

When I clone the repo and do npm i as wrote in the Readme, I run into a dependency issue. I'm not that deep into the npm dependency setup. But it looks like the prettier-webpack-plugin, which is 2 years old, references an outdated prettier major version.

Is there sth I can do on my side to work around this? I already tried downgrading prettier to 1.x major version but then webpack complains on version issues.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/prettier
npm ERR!   dev prettier@"^2.1.2" from the root project
npm ERR!   peer prettier@">=1.13.0" from [email protected]
npm ERR!   node_modules/eslint-plugin-prettier
npm ERR!     dev eslint-plugin-prettier@"^3.1.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev prettier-webpack-plugin@"^1.2.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/prettier
npm ERR!   peer prettier@"^1.0.0" from [email protected]
npm ERR!   node_modules/prettier-webpack-plugin

Hello, Tania!

First of all, your boilerplate is such an inspiration and a proper way to use webpack 5 that feels unreal.

Now, to the problem. It is possible to declare the @font-face and point to a font folder inside the public folder. I could not manage to do it.

Thanks and ward regards

I just want to remind you of issue #52 that hasn't been fixed. Just change css-loader options modules: false in webpack.dev.js & webpack.prod.js

I have mixed feelings with this issue, on the one hand it can be good to keep a package.lock json to ensure all is well referenced, on the other this is a boiler plate and it can be a pain in the neck to go back and forth with the package.lock.json on each pull request where a new package is added (maybe I'm missing something, sorry about that).

Hi,

I found an issue with the rule test for sass-loader. The regex must contain /i at the end otherwise the test is not working. On my machine at least (windows).
Just replace this line in webpack.dev.js (and webpack.prod.js:
test: /\.(sass|scss|css)$/,
with
test: /\.(sass|scss|css)$/i,

I was checking your configuration files in order to build a webpack boilerplate by myself and I noticed that inside the config file named webpack.prod.js you are using a plugin called terser-webpack-plugin.

I wanted to learn what is that plugin used for, so I went to the documentation and I found this piece of information:

If you are using webpack v5 or above you do not need to install this plugin. Webpack v5 comes with the latest terser-webpack-plugin out of the box.

I'm not an experienced developer, so I'm not sure if you really need to install that plugin in your project boilerplate, but I think is worth checking it out.

Suggestion:- Can you add "html-loader" to support for static html and multiple file entry for HtmlWebpackPlugin?

这个webpack搭建的脚手架不错，基本上拿来改下就可以用在项目当中了

how to concate main.[contenthash].bundle.js & runtime.[contenthash].bundle.js ?

can't you make it as a template? so people easily change the name etc.

Hi! Afrer npm i i see next problem, how can i fix that? Without --force, or --legacy-peer-deps. This problem with your boilerplate or on my side?

$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/prettier
npm ERR!   dev prettier@"^2.1.2" from the root project
npm ERR!   peer prettier@">=1.13.0" from [email protected]
npm ERR!   node_modules/eslint-plugin-prettier
npm ERR!     dev eslint-plugin-prettier@"^3.1.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev prettier-webpack-plugin@"^1.2.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/prettier
npm ERR!   peer prettier@"^1.0.0" from [email protected]
npm ERR!   node_modules/prettier-webpack-plugin
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\mitya\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mitya\AppData\Local\npm-cache\_logs\2021-01-15T17_39_16_127Z-debug.log

I'm getting this error when I try to use class properties even though this boilerplate is supposed to have the plugin out of the box.

Please change the link in readme from [email protected]:taniarascia/webpack-boilerplate to https://github.com/taniarascia/webpack-boilerplate.git