Some general questions about frontend-webpack-boilerplate HOT 8 CLOSED

Hello,

So here are my brief responses:

why don't using yarn instead of npm?

The main reason behind choosing npm over yarn is to keep the number of dependencies and third-party software at minimum. Don't get me wrong yarn is a great tool but npm after version 6 is delivering the same in terms of features and performance and it is part of the node itself. You can learn more about yarn vs npm here - Why Are You Still Using Yarn in 2018? Anyway you can easily switch this setup to yarn at it would work as expected.

in the package.json: why you put autoprefixer under dependencies instead of devDependencies?

autoprefixer is something that is actually meant to be used in your production code. It depends on your project browser support matrix and can be part or not of your application code. In general the autoprefixer is not needed for the setup itself, you can read more here dependencies or 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.

This setup utilises webpack and this is the correct way of making webpack manage your scss files. Webpack is a module builder. This is important to understand, as Webpack does not run during your page, it runs during your development. You can see more examples here How to configure SCSS modules for Webpack

in the index.html file you're not directly including css () and js (<script>). How this can works?

This setup is mainly for building scss, js, fonts, images, etc. I've included html building just for the purposes of demoing all the features. The <script> and <link..> tags are processed and appended during the webpack build process. You can examine after the build that dist/index.html file contains all your scripts properly included. All of this is configured in the webpack.config.js in the configuration of HtmlWebpackPlugin. Such approach gives your a lot of flexibility and actually webpack can optimise your imports - for example import just the code that is used on the page. More on this topic can be found here Modern approach of JavaScript bundling with Webpack

Are you evaluating to add a cache busting system?

The main purpose of this template is to be embedded in existing project setups for example WordPress, Laravel, Express applications etc. That is why it does not include web server setup and things like cache handling etc. But, I see this template to evolve in the direction of being used for a static websites as a standalone template so I plan to release a new version 4 which offer a development server and proper cache handling and more html parsing features.

Are you evaluating to add a system for including HTML partials?

The same goes here, too. I plan to expand html feature of the template for version 4.

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

As I've mentioned above currently the setup does not include development web sever. I am planning to include Webpack Dev Server as part of the plan to extend the setup to support more html parsing features, cache busting towards converting this setup as template for static html development.

Hope my answers help you clarify your doubts.
Thanks

from frontend-webpack-boilerplate.

Thanks @dangelion, the ETA of v4 is a couple of weeks from now.

I am also planning to release create-<initializer> package so you can easily create a new project by running $ npm init @weareathlon/frontend-webpack-boilerplate project-name and this will install the latest version of this template in a new dir project-name directly from npmjs.com. More of this create initialiser packages can be found here npm-init.

from frontend-webpack-boilerplate.

Using jQuery in a webpack managed setup will require some additional steps.

Back in the days v1.1.0 of this template was supporting jQuery by:

Firstly installing jquery via npm or directly editing the package.json in the dependencies section:

...
"jquery": "^3.2.1"
...

Then modifying the webpack.config.js by

• Defining in the beginning of the file:

const webpack = require('webpack');

• Then adding in the plugins:[] section the following:

...
plugins: [
  ...,
  new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
  })
]

then you can use it in your JS files, for example src/js/app.js:

$(function() {
  console.log("Hello from jQuery!");
});

We have dropped support for built-in jQuery from v2.0.0 and up. But you can still view the diff between v.1.0.0 and v1.1.0 when it added diff between v.1.0.0 and v1.1.0.

from frontend-webpack-boilerplate.

Yes and no... it depends on your scope and the library itself. You can research for paper.js for example - How load paper.js in webpack?

from frontend-webpack-boilerplate.

Hi @pnikolov
wow, so many thanks for your answer, I learnt a lot. And I can't wait for v4! Any ideas for when could be released?
Thanks

from frontend-webpack-boilerplate.

Hi @pnikolov
I'd like to know how you handle importing of JS libraries in your boilerplate. For example, I did this:
npm install jquery
then imported it in app.js with
import $ from 'jquery/dist/jquery';
but my IDE says:

Could not find a declaration file for module 'jquery/dist/jquery'. '/Users/myname/workspace/frontend-webpack-boilerplate/node_modules/jquery/dist/jquery.js' implicitly has an 'any' type.
  Try `npm install @types/jquery` if it exists or add a new declaration (.d.ts) file containing `declare module 'jquery/dist/jquery';`ts(7016)

I also tried npm install @types/jquery but the error persists.

Just curious how you manage this.
Thanks

from frontend-webpack-boilerplate.

You can read more about using jQuery here: Webpack - Usage: jQuery

from frontend-webpack-boilerplate.

@pnikolov Thanks a lot. jQuery was just an example library to understand the usage. I also use another library called Paper.js that gives me the same error as jQuery. So I need to follow the same steps also for that and in general for all dependencies?
Thanks

from frontend-webpack-boilerplate.