weareathlon / frontend-webpack-boilerplate Goto Github PK

Demo page for example - heading.png is not loading correctly which is referenced by demo.scss
images referenced are located within src/images/design folder as per documentation

Hi
I get many errors on IE 11, like SCRIPT438 (forEach not supported) or other about Promise not supported and so on.
The boilerplate doesn't compile to ES5?

I'm using version 4.2.6

Is your support request related to a problem? Please describe.
Yes, when I clone this repo, clean installed pc / vscode I have faced linebreak issues (only eslint plugin installed on vscode)
After check the .eslintrc file, I saw "linebreak-style" is missing.

Describe alternatives you've considered
Adding the "linebreak-style":0 on .eslintrc

With a new project, after running npm ci, I get:

28 vulnerabilities (2 low, 3 moderate, 23 high)

Should I ignore this or what is the recommended action?

Is there a place to place video assets to they will be copied over when we build? There are a lot of landing pages where one might use and mp4 or webm.

Want to know how can I get multiple javascript files as output & as well as multiple sass files?

for example here is a dummy layout of the directory:
src/
├─ scss/
│ ├─ pages/
│ │ ├─ home.scss
│ │ ├─ about.scss
│ ├─ main.scss
├─ js/
│ ├─ pages/
│ │ ├─ home.js
│ │ ├─ about.js
│ ├─ main.js

So the expected output would be main, home & about CSS files and the same goes for javascript main, home & about js files.

Is your feature request related to a problem? Please describe.

NO

*What is the motivation / use case for changing the behavior?

If webpack 5 have this system by default, i think it must be used

Describe the solution you'd like

Use the assets mangment https://webpack.js.org/guides/asset-management/

Describe alternatives you've considered

Additional context

{
  test: /\.(png|gif|jpe?g|svg)$/i,
  type: 'asset',
  generator: {
    filename: 'images/[name].[hash:6].[ext][query]',
  },
  parser: {
    dataUrlCondition: {
      maxSize: environment.limits.images,
    },
  },
},
{
  test: /\.(eot|ttf|woff|woff2)$/,
  type: 'asset',
  generator: {
    filename: 'fonts/[name].[hash:6].[ext][query]',
  },
  parser: {
    dataUrlCondition: {
      maxSize: environment.limits.fonts,
    },
  },
},

• What is the expected behavior?
  running : npm run watch, will be nice open the browser syncronized with the dev .

• What is the motivation / use case for changing the behavior?
  Quick start to develop, are many people getting away from webpack beacouse beginners like me is hard to grasp.
  running: npm run watch open localhost dist on port 3000 but not load anything, not sure how works with the package.
  Thanks

• Please tell us about your environment:

  • Version: 10
  • System / Windows ]
  • Language: [all | SASS | ES6/7 | ES5 ]

• Other information (e.g. detailed explanation, stack-traces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
  sasasasasasassa

Cant npm install on macbook m1 osx 17.
node v14
npm v9

Errors:
command failed
npm ERR! command sh -c node lib/install.js
npm ERR! compiling from source
npm ERR! spawn Unknown system error -86
npm ERR! optipng pre-build test failed
npm ERR! Error: Command failed: /bin/sh -c make install
npm ERR! pngrtran.c:99:1: warning: unused function 'png_rtran_ok' [-Wunused-function]
npm ERR! png_rtran_ok(png_structrp png_ptr, int need_IHDR)
npm ERR! ^
npm ERR! 1 warning generated.
npm ERR! ld: warning: option -s is obsolete and being ignored
npm ERR! Undefined symbols for architecture arm64:
npm ERR! "_png_init_filter_functions_neon", referenced from:
npm ERR! _png_read_filter_row in libpng.a(pngrutil.o)
npm ERR! ld: symbol(s) not found for architecture arm64
npm ERR! clang: error: linker command failed with exit code 1 (use -v to see invocation)
npm ERR! make[1]: *** [optipng] Error 1
npm ERR! make: *** [install] Error 2

Hi
thanks for this boilerplate, awesome! It gets better any time

In this time I’m reading a lot about these 2 modern concepts: CSS custom properties and CSS grids. Well, it results that if working with a little bit IE11 in mind they are ready to be used, now. So I was asking how can add support for them.
I mean:

1. Autoprefixer 9+ at today delivers prefixes and others for supporting CSS Grids in IE (source). It needs to be enabled in Webpack
2. For CSS custom properties there are some polyfills (link, link) but it could be more interesting this postcss module for Webpack postcss-custom-properties

I'm not a master of Webpack, you can help me to implement those in you boilerplate?
Could be interesting to add them as new features?
Thanks

Hi, I'm currently trying to replace my companies massively outdated and super slow Gulp + Bower setup with this Webpack implementation. Everything is working great with only a couple of tweaks, except for images.

I have all my raw images in the ./src/images/ folder yet when I run npm run build the images are not being compressed and copied to ./dist/images how can I resolve this? I've got the feeling it's searching my app for used images, but as this is website is primarily php based the actual html/php files don't exist and don't get checked over by the webpack setup at all. Which I'm fine with, I simply want it to process and dump the entire images folder if possible.

On a side note, thank you for this great boilerplate, it has saved me a huge amount of time already.

The current setup is that all the files from within /src are essentially copied over into /dist. However I've been trying to amend the setup so that the new structure would be:

index.html
other.html
favicon.ico
|- src
   |-fonts
   |- images
   |- js
   |- scss
   |- videos
|- dist/assets
   |- css
   |- images
   |- js
   |- videos

When I try to update the config though I can't get the setup to watch both the .html files and compile the css/js/images etc into the dist folder whilst still watching for file changes.

I've tried setting up different path structures like below to test but it never works properly.

path.join(__dirname, "build"),
path.join(__dirname, "scripts"),

Hey, thanks for your boilerplate, i currently use it in a project, but was missing the scss sourcemaps.
I added them temporarily to my project with the following options, but this could probably be improved.

    devtool: 'source-map',
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'style-loader', 
            MiniCssExtractPlugin.loader, 
            'css-loader',
            { loader: 'postcss-loader', options: { sourceMap: true } },
            { loader: 'sass-loader', options: { sourceMap: true } }
          ],
        },

Hi
I just noticed that images under src/images and src/images/design are not copied in the respective dist/images and dist/images/design folders.

Is this a bug or is there an explanation?

Also, I'd like to change the folders structure, that is removing folders content and design and create my own folders. I tried but it seems webpack is configured for work only with the actual structure. Right? Is it possible make it more flexible?

Another example is: removing the favicon.ico from images folder webpack returns an error. I need to remove the favicon from there, because I use another system.

Thanks a lot (your boilerplate is awesome)

Is your support request related to a problem? Please describe.

After clean install, I see next message:

(node:13772) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at C:\Users\mitya\Desktop\testfolder\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use node --trace-deprecation ... to show where the warning was created)

My steps:
git clone;
delete .git folder
npm ci;
npm run dev;

How do I fix it?

Describe alternatives you've considered

I've tried re-installing uninstall several times.

Additional context

Node version: v15.5.1
NPM version: 7.3.0

Full log:

PS C:\Users\mitya\Desktop\testfolder> npm run dev

@weareathlon/[email protected] dev
webpack serve --config configuration/webpack.dev.config.js --mode=development

i ｢wds｣: Project is running at http://localhost:8000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\mitya\Desktop\testfolder\dist
i ｢wds｣: 404s will fallback to /index.html
i ｢wdm｣: wait until bundle finished: /
(node:13772) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at C:\Users\mitya\Desktop\testfolder\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./".
(Use node --trace-deprecation ... to show where the warning was created)
i ｢wdm｣: assets by info 860 KiB [immutable]
asset fonts/DINPro-Regular.acf8fe.svg 412 KiB [emitted] [immutable] [from: src/fonts/DINPro-Regular.svg] (auxiliary name: app)
asset fonts/DINPro-Regular.2ac4eb.eot 178 KiB [emitted] [immutable] [from: src/fonts/DINPro-Regular.eot] (auxiliary name: app)
asset fonts/DINPro-Regular.f8ce19.ttf 177 KiB [emitted] [immutable] [from: src/fonts/DINPro-Regular.ttf] (auxiliary name: app)
asset fonts/DINPro-Regular.7b307e.woff 77.6 KiB [emitted] [immutable] [from: src/fonts/DINPro-Regular.woff] (auxiliary name: app)
asset images/design/heading.499bf3.png 15.9 KiB [emitted] [immutable] [from: src/images/design/heading.png] (auxiliaryassets by path images/content/ 240 KiB
asset images/content/header.png 238 KiB [emitted] [from: src/images/content/header.png] [copied]
asset images/content/github.png 1.49 KiB [emitted] [from: src/images/content/github.png] [copied]
asset images/content/logoa.svg 651 bytes [emitted] [from: src/images/content/logoa.svg] [copied]
assets by chunk 916 KiB (name: app)
asset js/app.js 909 KiB [emitted] (name: app)
asset css/app.css 6.26 KiB [emitted] (name: app)
asset index.html 21.9 KiB [emitted]
asset favicon.ico 1.12 KiB [emitted]
Entrypoint app 916 KiB (860 KiB) = css/app.css 6.26 KiB js/app.js 909 KiB 5 auxiliary assets
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/ 335 KiB
modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
modules by path ./node_modules/html-entities/lib/.js 61 KiB 5 modules
modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/.js 4.51 KiB 3 modules
modules by path ./src/ 340 bytes (javascript) 6.26 KiB (css/mini-extract)
modules by path ./src/js/.js 290 bytes
./src/js/app.js 91 bytes [built] [code generated]
./src/js/demo.js 199 bytes [built] [code generated]
modules by path ./src/scss/*.scss 50 bytes (javascript) 6.26 KiB (css/mini-extract)
./src/scss/app.scss 50 bytes [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/app.scss 6.26 KiB [code generated]
webpack 5.22.0 compiled successfully in 19899 ms
i ｢wdm｣: Compiled successfully.

Hi
I'm developing a project with simple PHP, that is a .php file for each page (ie. index.php, about.php) that include partials (ie. header.php, footer.php grouped in a folder partials)

Is it possibile to do this with your boilerplate and in case what's your advices?

I'm thinking the best way was: put php files (along with the folder partials) inside src folder, then the boilerplate should copy them into dist folder. This is just an idea, it could make no sense.

What do you think about?
Thanks

Hey, thanks for a cool boilerplate!

I'm using CKEditor (which brings some 3rd party css) and I have some css conflicts in module rules in webpack config.

When I have MiniCssExtractPlugin turned on (like in boilerplate's webpack cfg), then project's styles work ok but browser default/CKEditor styling doesn't work:
(Test should be styled, but it's not. <input> at the bottom is ok)

When I turn off MiniCssExtractPlugin, then my project styles are not loaded, but browser default styles work well (CKEditor styles don't though):
(Test is styled, <input> is not)

Here's the webpack config (module part) - the difference between 2 cases is only in commenting one line (// MiniCssExtractPlugin.loader,):

  module: {
    rules: [
      {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ['raw-loader']
      },
      {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              injectType: 'singletonStyleTag',
              attributes: {
                'data-cke': true
              }
            }
          },
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: styles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                },
                minify: true
              })
            }
          },
        ]
      },
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.((c|sa|sc)ss)$/i,
        use: [
          // MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ],
        exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(png|gif|jpe?g|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: environment.limits.images,
          },
        },
        generator: {
          filename: 'images/design/[name].[hash:6][ext]',
        },
        exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: environment.limits.images,
          },
        },
        generator: {
          filename: 'images/design/[name].[hash:6][ext]',
        },
      },
    ],
  },

Any ideas? As a last resort i would just like to disable the MiniCssExtractPlugin and have the styles work if there is no other good idea

Cheers

Hi, how about adding an hash on compiled css and js when deploying to production?

I have put one mp4 video in my images folder, and trying to call in html, I also install the file-loader added in webpack.config.js file as per documentation.

index.html
<video autoplay muted loop id="myVideo"> <source src="../images/design/rain.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video>

webpack.config.js
{ test: /\.(mp4)$/i, use: [ { loader: 'file-loader', options: { name: 'images/design/[name].[ext]', publicPath: '../', }, }, ], },

But video is not viewing. Also inspect the path in browser which is showing correct as expected.
http://localhost:8000/images/design/rain.mp4

Please help me how to fix this issue?

Describe the bug

Documentation is not up to date or webpack config is wrong.

To Reproduce

In the docs, it's stated that after a production build the fonts will be in an own directory:

Fonts are located under /dist/fonts/

That's not correct. The current webpack config will move the fonts into /dist/images/fonts/ - which is odd anyway.

Also, turning on hashing in the webpack config doesn't include the .css and .js file per default.

Expected behavior

Fonts are moved to /dist/fonts/ according to the documentation.

Is your feature request related to a problem? Please describe.

Remove a deprecated dependency package - sass-lint

What is the motivation / use case for changing the behavior?

Use up-to-date tooling.

Describe the solution you'd like

Migrate to styleint

I want to use the PostCSS plugin 'postcss-extract-media-query' and it runs correctly.
The problem is, that this plugin runs before 'CleanWebpackPlugin' is executed and so all files will be removed instantly.

I've extended the webpack.config.js with the following:
{ loader: 'postcss-loader', options: { postcssOptions: { plugins: (loader) => [ require('postcss-extract-media-query')() ] } }, },
and of course I have extended the postcss.config.js file.

I've read and tried a lot but I must admit this Webpack config things are still a mystery for me, so if you could point me to the right direction, this would be great.

In your docs it says:

HTML files are located under src/templates/

It will automatically build all HTML files placed under src/templates/ directory, no need to manually configure each template anymore!

However, there is no src/templates folder. If I create one with a *.html file inside, let’s say /src/template/my-template.html and run the build, nothing seems to happen or change from the default setup.

How can I access my (compiled) templates via the dev server? My naïve approach would be to just call http://localhost:8000/my-template.html.

It would be great, if you described the templates feature in a little more detail.

What if we have a few folders, maybe About or Works:

index.html
about/index.html
works/first/index.html

How export those html to dist folder with src replaced?

Hi, I found mistake in package's scripts: "lint:sass": "sass-lint 'src/scss/*' -v -q".
You should rewrite to "lint:sass": "sass-lint src/scss/* -v -q", without quotes for path to styles files.
After that it will work. Incomprehensible, but in the documentation for sass-lint wrote like in your package.json and it doesn't work!

👋 Hi and thank you for the great Boilerplate!

The boilerplate fails to load any fonts in the demo and on my local machine.
In the console it says:

I have tried different fonts to make sure the font is not broken.

Thank you & Greetings

Extra libraries like jquery, swiperjs, wowjs and animate etc. There may be many more libraries in which file should I put them?

Could you please add svg-sprite-loader to inject svg icons into the document' s body?

This repository's issues are reserved for mainly feature requests and bug reports.

• I'm submitting a ...

  • bug report
  • feature request
  • support request

• What is the current behavior?
  After npm install i run

npm run watch

and after the first file change and browser reload all the images copied by CopyWebpackPlugin get deleted...
it seems that if i remove the new CleanWebpackPlugin(), from plugins it's ok, but CopyWebpackPlugin is not executed on code modifications...

I solved it for now by setting new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
it's not ideal but i have to test some more...

• What is the expected behavior?

Images should all be recopied and available as they are before first modification

• Please tell us about your environment:

  • Version: 2.5.0
  • System / OS / Browser: [ Windows]
  • Language: [all | SASS | ES6/7 | ES5 ]

Thanks

Hi
first of all, congratulations for this boilerplate. That's exactly what we're searching for our projects and it seems awesome. I've some basic questions/proposals to ask:

• why don't using yarn instead of npm?
• in the package.json: why you put autoprefixer under dependencies instead of devDependencies?
• why in the app.js you have import '../scss/app.scss';? I don't understand how could work importing an scss into a js file.
• in the index.html file you're not directly including css (<link>) and js (<script>). How this can works?
• Are you evaluating to add a cache busting system?
• Are you evaluating to add a system for including HTML partials?
• Is there a way to start the project with an url like http://localhost:3000 and not the actual http://localhost:3000/frontend-webpack-boilerplate/dist/? Sure that if you're going to add a built-in server this will be super awesome

Hope you could help to clarify these doubts.
Thanks

I want to manage more than 20+ html pages? Is there any shortcut using webpack html plugin?

git clone https://github.com/WeAreAthlon/frontend-webpack-boilerplate.git
cd frontend-webpack-boilerplate
npm install
npm run build

dist/js/app.js is not babeled to ES5, e.g. functions remain () => ...

Hi,

I have a problem with live reload. I'm starting a project with npm run dev command and on every change page is reloading, but changes are not applied. Only hard reload helps

As it is getting more and more popular we need to add such tool support as part of this template - https://prettier.io/docs/en/

None of the websites i created using the frontend-webpack-boilerplate are working on IE11

I tried to figure out why I get this issue and I ended up installing a fresh version of the latest boilerplate but i still get the same
error message : app.js (1,4) syntax error

Steps to reproduce the behavior:

1. install the latest version of the boilerplate
2. install all the dependencies
3. run yarn dev
4. open in IE11

No js is working due to this error

the error is even visible in your demo page
https://weareathlon.github.io/frontend-webpack-boilerplate/

Hi
have you ever considered of add a cache busting system.
I know it's possible because I use Sage 9 that implements it and it works very very well.
Basically when launching npm run production it adds an hash code at the end of app.css and app.js (like app-hd6sgd4.css)
What do you think about?

In the previous version of the boilerplate you could set it up like so
external: { proxy: "http://example.test/", },

This would change the URL whist developing. I can't figure out how to recreate this feature since updating to the latest code on the repo.

Does this feature still exist in webpack 5 and this boilerplate?

Thanks

Is your feature request related to a problem? Please describe.

No, it is related to better maintenance

What is the motivation / use case for changing the behavior?

Lower time for maintenance and automate the package dependencies updates.

Describe the solution you'd like

Configure Github tools to automatically detect and update dependencies.

Describe the bug

Cannot include partials in .ejs files as it returns:

Error: Child compilation failed

If I use the include('./nav.ejs') syntax, I get:

Template execution failed: ReferenceError: include is not defined

To Reproduce

Steps to reproduce the behavior:

1. Create a partial file, for example: nav.ejs in the root (same folder as index.ejs)
2. In index.ejs, add an include tag referencing the partial, for example <%- include nav.ejs %>
3. Run yarn dev

Expected behavior

It should render the nav partial in the index.ejs when compiling

Hi
after running npm install I get this message:

added 1743 packages from 735 contributors and audited 15913 packages in 43.147s
found 13 vulnerabilities (1 low, 10 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details

What's wrong?
Thanks