lifenautjoe / webpack-starter-basic Goto Github PK

A simple webpack starter project for your basic modern web development needs.

Home Page: https://lifenautjoe.github.io/webpack-starter-basic/

JavaScript 47.47% HTML 31.37% CSS 21.16%

webpack seed starter webpack-starter webpack-seed starter-kit es6-starter es6 sass seed-project

webpack-starter-basic's Issues

Allow for hot module reloading setup on kickstart

Would be great if we can let users decide whether they want a hot module reloading setup when they kickstart the project.

Update needed : optionsSchema.definitions.output.properties.path.description,

As Per plotly/dash-component-boilerplate#12 there is an update in webpack that broke this starterkit. Simply update

        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.1",

to fix:

node_modules/webpack-cli/bin/config-yargs.js:89
				describe: optionsSchema.definitions.output.properties.path.description,
				                                           ^

TypeError: Cannot read property 'properties' of undefined

Can't include the one HTML template inside another one.

Hello.

I am on the way of learning WebPack and use your example like a start point.
Could you help, please, with the issue?

I have such a file structure:

and want to include navigation.html inside header.html

I have the Index.html :

....
<!DOCTYPE html>
<html>
  <%= _.template(require('./../includes/layout/head.html').default)(data) %>
  <body data-spy="scroll" data-target="#subNavigation" data-offset="200">

    <%= _.template(require('./../includes/layout/header.html').default)(data) %>
    <%= _.template(require('./../includes/components/intro.html').default)(data) %>

    <div class="container">Index Page</div>

    <%= _.template(require('./../includes/layout/footer.html').default)(data) %>
    <script src="js/bundle.js"></script>
  </body>
</html>

and the header.html:

<header id="header">
  <img src="img/logo.svg" id="logo" />
  <%= _.template(require('./../includes/components/navigation.html').default)(data) %>
</header>

But as a result, I have an error:

Html Webpack Plugin:
  Error: Cannot find module './../includes/components/navigation.html'
  
  - module.js:11 require
    internal/module.js:11:18
  
  - lodash.templateSources[1]:9 eval
    lodash.templateSources[1]:9:22
  
  - index.html:108 
    D:/Projects/TestProject/markup/src/html/views/index.html:108:132
  
  - index.html:115 ./node_modules/html-webpack-plugin/lib/loader.js!./src/html/views/index.html.module.exports
    D:/Projects/TestProject/markup/src/html/views/index.html:115:3
  
  - index.js:284 Promise.resolve.then
    [markup]/[html-webpack-plugin]/index.js:284:18
  
  - next_tick.js:188 process._tickCallback
    internal/process/next_tick.js:188:7

It would be great if you can push me on the right way.

Adding background form scss doesn't work

When I try add image as background, picture not showing. My code looks like this.

.bg { background-image: url('../assets/section-packets-bg.png'); }

webpack generate this url url("http://localhost:8080/../../assets/section-packets-bg.png")

Could you add stylelint?

Could you add stylelint to PostCSS? Or show an example how to do it?

problem with babel-preset-flow

Following the kickstart instructions results in the below error.

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Couldn't find preset "flow" relative to directory "/Users/skelly"
    at /Users/skelly/dev/webpack-starter-basic/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/skelly/dev/webpack-starter-basic/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/skelly/dev/webpack-starter-basic/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/skelly/dev/webpack-starter-basic/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/skelly/dev/webpack-starter-basic/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/skelly/dev/webpack-starter-basic/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/skelly/dev/webpack-starter-basic/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/skelly/dev/webpack-starter-basic/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/skelly/dev/webpack-starter-basic/node_modules/babel-loader/lib/index.js:50:20)
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js main[1]
C

service worker generation?

create-react-app has it, google's abandoned web starter kit has it.

i really like this starter kit so adding new features would be pretty neat. i really like how react can turn a basic web app into a PWA without doing anything.

btw i'd be nice to see webpack-dev-server host a server on the local network the same way create-react-app does. i just added my ip to the --host flag to webpack-dev-server in npm start but it would be nice to see this starter kit do it automatically out of the box.

Static assets and fonts

Hello there !

I used your webpack starter this week end for a small project. It's perfect and exactly what i was looking for 😻 However i was wondering if you you had planned to handle static assets (images) and web fonts ?

For exemple, in my small project, i created a small canvas with pixi.js and i use some images inside. What's the best way to use images ?

Thanks 👍

*-close classes were removed from build

got this weird issue, if a class ends with -close it is removed from the built .css

index.scss

.mfp-close {
    width: 100px;
    height: 100px;
}
.test-close {
    width: 100px;
    height: 100px;
}
.close {
    width: 100px;
    height: 100px;
}
.test {
    width: 100px;
    height: 100px;
}

generated styles.css

.close,.test{width:100px;height:100px}
/*# sourceMappingURL=styles.eae04a2f42f80581e776.css.map */

How to load SVG images?

Nice starter! How I can load SVG images in html and background: url()?

Thanks a lot!

How to include JS libraries

How would I include bootstrap for example?

Add a config to change which CSS-Pre-Processor

I've seen plenty of folks use alternatives to SASS.

Such as:

So it might be nice to have a prompt such as Choose your CSS Preprocessor

Sent from my Pixel 2 using FastHub

Upgrade to webpack 4

kickstart throws error 130

It's odd because it seems to work afterwards, but don't know if I'll find more issues later because of this. Here is the output of the 'npm kickstart' command

 npm run kickstart

> [email protected] kickstart /home/glantruan/_programming/personal/all-fred
> node kickstarter

? What's the name of your project? (kebab-cased) (awesome-project) AllFred
? What's the name of your project? (kebab-cased) AllFred
? Who's the author? (John Doe) Glantucan
? Who's the author? Glantucan
? What color would you like the mobile header to be? (https://bit.ly/1LX2mtq) (#ff4970) #ff4970
? What color would you like the mobile header to be? (https://bit.ly/1LX2mtq) #ff4970
Removing /docs directory
Updating package.json name
Updating package.json author
Removing package.json git repository
Removing package.json kickstart dependencies
Removing package.json kickstart script
Writing new package.json
Removing package-lock.json
Setting mobile header color to #ff4970
Setting page title to project name
Writing new index.html
Writing new webpack.prod.js
Removing kickstarter script
Removing .git directory
All done!
npm ERR! code ELIFECYCLE
npm ERR! errno 130
npm ERR! [email protected] kickstart: `node kickstarter`
npm ERR! Exit status 130
npm ERR!
npm ERR! Failed at the [email protected] kickstart script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/glantruan/.npm/_logs/2018-12-06T14_55_21_878Z-debug.log

And here is the log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'kickstart' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prekickstart', 'kickstart', 'postkickstart' ]
5 info lifecycle [email protected]~prekickstart: [email protected]
6 info lifecycle [email protected]~kickstart: [email protected]
7 verbose lifecycle [email protected]~kickstart: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~kickstart: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/glantruan/_programming/personal/all-fred/node_modules/.bin:/home/glantruan/bin:/home/glantruan/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
9 verbose lifecycle [email protected]~kickstart: CWD: /home/glantruan/_programming/personal/all-fred
10 silly lifecycle [email protected]~kickstart: Args: [ '-c', 'node kickstarter' ]
11 silly lifecycle [email protected]~kickstart: Returned: code: 130  signal: null
12 info lifecycle [email protected]~kickstart: Failed to exec kickstart script
13 verbose stack Error: [email protected] kickstart: `node kickstarter`
13 verbose stack Exit status 130
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:962:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/glantruan/_programming/personal/all-fred
16 verbose Linux 4.15.0-38-generic
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "kickstart"
18 verbose node v10.14.1
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 130
22 error [email protected] kickstart: `node kickstarter`
22 error Exit status 130
23 error Failed at the [email protected] kickstart script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 130, true ]

node fs missing?

As per: webpack-contrib/css-loader#447

Need to add

 node: {
      fs: 'empty'
    },

to webpack configs to get around


ERROR in ./node_modules/schema-utils/src/validateOptions.js
Module not found: Error: Can't resolve 'fs' in

favicons-webpack-plugin -> webapp-webpack-plugin

I was trying this out and noticed that the favicons-webpack-plugin is not really maintained anymore, because I had wanted to fix some vulnerabilities in the npm audit results. Looking through the issues on that project I discovered that there's a drop-in replacement and wanted to share here. That project is here: https://github.com/brunocodutra/webapp-webpack-plugin, seems to be fine so far!

Adding more pages

Hi @lifenautjoe !

Thank you for sharing the kit, it works great! Turns out the project I'm working on needs more than 1 page though. What would be a good way to add more pages to the app using this kit?

Thank you!

Investigate mini-css-extract-plugin as a replacement for ExtractTextPlugin

As suggested by a user here, it might be better than the extract text plugin.

Needs investigation.

lifenautjoe / webpack-starter-basic Goto Github PK

webpack-starter-basic's Issues

Recommend Projects

Recommend Topics

Recommend Org