This is the companion github repo for the "An Annotated webpack 4 Config for Frontend Web Development" article.
Home Page: https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development
License: MIT License
Below is the error I have been getting from the webpack configuration
Paschal Collins@DESKTOP-H75Q2AJ MINGW64 ~/goProject/myProjects/nextProject (master)
$ npm run build
[email protected] build C:\Users\Paschal Collins\goProject\myProjects\nextProject
webpack --config webpack.prod.js --progress --hide-modules
No matching files found.
source: http://example.test/ dest: ./web/dist/criticalcss/index_critical.min.css
10% [1] building 0/0 modules 0 activeError: Invalid image buffer
at Object.source (C:\Users\Paschal Collins\goProject\myProjects\nextProject\node_modules\favicons\dist\helpers.js:171:35)
at favicons (C:\Users\Paschal Collins\goProject\myProjects\nextProject\node_modules\favicons\dist\index.js:193:26)
at Object.module.exports (C:\Users\Paschal Collins\goProject\myProjects\nextProject\node_modules\webapp-webpack-plugin\src\loader.js:23:10)
at LOADER_EXECUTION (C:\Users\Paschal Collins\goProject\myProjects\nextProject\node_modules\loader-runner\lib\LoaderRunner.js:119:14)
at runSyncOrAsync (C:\Users\Paschal Collins\goProject\myProjects\nextProject\node_modules\loader-runner\lib\LoaderRunner.js:120:4)
at iterateNormalLoaders (C:\Users\Paschal Collins\goProject\myProjects\nextProject\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
at Array. (C:\Users\Paschal Collins\goProject\myProjects\nextProject\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Users\Paschal Collins\goProject\myProjects\nextProject\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at C:\Users\Paschal Collins\goProject\myProjects\nextProject\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
at C:\Users\Paschal Collins\goProject\myProjects\nextProject\node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
82% [1] emitting ImageminWebpWebpackPluginimagemin-webp-webpack-plugin: 0 KB saved
82% [1] emitting GenerateSW
Cloned from current repo, did
npm install
followed by
npm run build
> [email protected] build D:\_Code\6_19_WIP\annotated-webpack-4-config
> webpack --config webpack.prod.js --progress --hide-modules
No matching files found.
source: http://example.test/ dest: ./web/dist/criticalcss/index_critical.min.css
92% [1] after chunk asset optimization SourceMapDevToolPlugin ...rs~confetti~vue.eec2757c53f003b2af
92% [1] after chunk asset optimization SourceMapDevToolPlugin js\app.0eb772a0d13ae3280443.js genera
92% [1] after chunk asset optimization SourceMapDevToolPlugin js\confetti.53e58c8ba32f920f21c9.js g
92% [1] after chunk asset optimization SourceMapDevToolPlugin ...rs~confetti~vue.eec2757c53f003b2af
92% [1] after chunk asset optimization SourceMapDevToolPlugin js\app.0eb772a0d13ae3280443.js attach
92% [1] after chunk asset optimization SourceMapDevToolPlugin js\confetti.53e58c8ba32f920f21c9.js a
93% [1] emitting ImageminWebpWebpackPluginimagemin-webp-webpack-plugin: 0 KB saved
95% [1] after emitting SizeLimitsPluginWebpack Bundle Analyzer saved report to D:\_Code\6_19_WIP\an
notated-webpack-4-config\web\dist\report-modern.html
96% [0] after chunk asset optimization SourceMapDevToolPlugin css\styles.9d19cbe4b286aabb5603.css g
96% [0] after chunk asset optimization SourceMapDevToolPlugin js\styles-legacy.9d19cbe4b286aabb5603
96% [0] after chunk asset optimization SourceMapDevToolPlugin ...etti~vue-legacy.43cf7fbb65ac3dbcc3
96% [0] after chunk asset optimization SourceMapDevToolPlugin js\app-legacy.0bd7686c585860d86e5e.js
96% [0] after chunk asset optimization SourceMapDevToolPlugin ...confetti-legacy.b91b16e94e4e5583f8
96% [0] after chunk asset optimization SourceMapDevToolPlugin js\styles-legacy.9d19cbe4b286aabb5603
96% [0] after chunk asset optimization SourceMapDevToolPlugin ...etti~vue-legacy.43cf7fbb65ac3dbcc3
96% [0] after chunk asset optimization SourceMapDevToolPlugin js\app-legacy.0bd7686c585860d86e5e.js
96% [0] after chunk asset optimization SourceMapDevToolPlugin ...confetti-legacy.b91b16e94e4e5583f8
97% [0] emitting clean-webpack-pluginclean-webpack-plugin: removed web\dist\js
clean-webpack-plugin: removed web\dist\js\app.0eb772a0d13ae3280443.js
clean-webpack-plugin: removed web\dist\js\app.0eb772a0d13ae3280443.js.map
clean-webpack-plugin: removed web\dist\js\confetti.53e58c8ba32f920f21c9.js
clean-webpack-plugin: removed web\dist\js\confetti.53e58c8ba32f920f21c9.js.map
clean-webpack-plugin: removed web\dist\js\precache-manifest.a4d02ebca493b629c7a6581e6888e3b3.js
clean-webpack-plugin: removed web\dist\js\vendors~confetti~vue.eec2757c53f003b2af23.js
clean-webpack-plugin: removed web\dist\js\vendors~confetti~vue.eec2757c53f003b2af23.js.gz
clean-webpack-plugin: removed web\dist\js\vendors~confetti~vue.eec2757c53f003b2af23.js.map
clean-webpack-plugin: removed web\dist\manifest.json
clean-webpack-plugin: removed web\dist\report-modern.html
97% [0] emitting SaveRemoteFilePlugin Remote file downloaded: ...ics.80e9f663857fe3a4f3b2826ec5ab4
99% [0] after emitting CriticalCssWebpackPluginTypeError: Cannot read property 'content-type' of un
defined
at temp (D:\_Code\6_19_WIP\annotated-webpack-4-config\node_modules\critical\lib\file-helper.js:1
06:37)
at D:\_Code\6_19_WIP\annotated-webpack-4-config\node_modules\critical\lib\file-helper.js:199:27
at processTicksAndRejections (internal/process/task_queues.js:89:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `webpack --config webpack.prod.js --progress --hide-modules`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build 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! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-06-21T23_33_37_639Z-debug.l
og```
Ca not run the build from your example.
What have I done:
Doesn't build anything:
I managed getting a huge cpu boost by adding the ignored prop in the dev server config,
and much faster compile times for css. (working with Vagrant and polling is 1)
watchOptions: {
poll: !!parseInt(settings.devServerConfig.poll()),
ignored: /node_modules/
},
see my pull request here #4
I just spend hours looking for a solution why my woff font files didn't get loaded.
Turns out, in the latest webpack.dev.js file in the postCSS loader config you disable the url() function of CSS: https://webpack.js.org/loaders/css-loader/#url
Turning this on solved my issue. I guess this also disabled the use of background-image in CSS.
Is this a bug or a feature? And if the latter, why?
When using this (for testing purposes):
{{ craft.twigpack.includeSafariNomoduleFix() }}
{{ craft.twigpack.includeJsModule("app.js", false) }}
JS doesn't work anymore, simply doesn't get executed and no errors.
I couldn't really find the issue, but it seems that the optimizer is misconfigured and the chunks are wrong.
styles: {
name: settings.vars.cssName,
test: /\.(pcss|css|vue)$/,
chunks: 'all',
enforce: true
}
When removing this block vue works fine but the chunks are wrong of course. Seems that putting al styles in one chunk is breaking js/vue.
When using the module version everything is fine.
Sorry for the bad description, but I'm still learning webpack.
babel-preset-env is configured with useBuiltIns: 'entry' and according to the docs (https://babeljs.io/docs/en/babel-preset-env) import "@babel/polyfill" line is expected in app's entry file, but i can't find it referenced anywhere (even as part of webpack entry points) in the project. Is it enough to add @babel/polyfill to dependencies in pkg.json?
I cannot run development mode but I'm not getting any error either.
When trying the build command I get this error:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration[0].module.rules[0].exclude should be one of these:
RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
-> One or multiple rule conditions
Details:
* configuration[0].module.rules[0] has an unknown property 'cacheDirectory'. These properties are valid:
object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
* configuration[0].module.rules[0].exclude should be an instance of RegExp
* configuration[0].module.rules[0].exclude: The provided value "" is not an absolute path!
* configuration[0].module.rules[0].exclude should be an instance of function
* configuration[0].module.rules[0].exclude should be an array:
[RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
* configuration[0].module.rules[0].exclude should be an object.
* configuration[0].module.rules[0].exclude should be an array:
[RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
- configuration[1].module.rules[0].exclude should be one of these:
RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
-> One or multiple rule conditions
Details:
* configuration[1].module.rules[0] has an unknown property 'cacheDirectory'. These properties are valid:
object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
* configuration[1].module.rules[0].exclude should be an instance of RegExp
* configuration[1].module.rules[0].exclude: The provided value "" is not an absolute path!
* configuration[1].module.rules[0].exclude should be an instance of function
* configuration[1].module.rules[0].exclude should be an array:
[RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
* configuration[1].module.rules[0].exclude should be an object.
* configuration[1].module.rules[0].exclude should be an array:
[RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
When I change
exclude: settings.babelLoaderConfig.exclude,
cacheDirectory: true,
back to
exclude: /node_modules/,
it works again.
Firstly, let me congratulate you on a such an awesome article and for making it available to the public! Webpack is a massive tool to try and learn in any comprehensive way and you have dug deep than many. Well done!
Now to the issue at hand, Tailwind imports in app.pcss are failing in the build process (as per screen shot).
Tailwindcss is installed as a dependency per original package.json with yarn install
I updated .env, webpack.settings.js and twigpack.php for my environment as per docs.
Built project with yarn build
Imports are as per original @import "tailwindcss/preflight";
JS is compiling fine and confetti abounds but I have no tailwind styles available.
Can someone add a working example with working Twigpack config file (twigpack.php) and working templates, css/js files in dev mode?
Maybe I do something wrong or my Vagrant configuration is wrong, but it doesn't work for me :-(
Thanks for considering my request.
Hi guys,
I have an issue with my config.
The output paths look correct
output: { filename: path.join('./js', '[name].[hash].js'), publicPath: settings.devServerConfig.public() + '/', },
and webpack debug log message looks also correct ...
Built at: 05/18/2020 4:56:40 PM Asset Size Chunks Chunk Names app.css 71.2 KiB app [emitted] app js/app.e822af95ed9aa5f7dc34.js 1.85 MiB app [emitted] [immutable] app manifest.json 122 bytes [emitted] Entrypoint app = app.css js/app.e822af95ed9aa5f7dc34.js
Does anoyone had this issue?
Thanks
Hi, I have just started on react and react-native. I have started writing an app skeleton but encounter a problem with firebase (or at least i think it is). or it is babel?
I have reinstalled babel both globally and in the app folder.
I have tried to delete and reinstall firebase. but the program still doesnt run.
I have done a gradlew clean in the folder.
I am running on windows 10, and running android studio
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Header, Button, Spinner } from './components/common';
//import firebase from 'firebase';
import LoginForm from './components/LoginForm';
import HomeScreen from './components/HomeScreen';
import firebase from '@firebase/app';
import '@firebase/auth';
class App extends Component {
state = { loggedIn: null };
componentDidMount() {
firebase.initializeApp({
apiKey: '******1f******',
authDomain: 'auth-*****.firebaseapp.com',
databaseURL: 'https://auth-****.firebaseio.com',
projectId: 'auth-******',
storageBucket: 'auth-******.appspot.com',
messagingSenderId: '**********62*'
});
}
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.setState({ loggedIn: true });
} else {
this.setState({ loggedIn: false });
}
});
}
renderContent() {
switch (this.state.loggedIn) {
case true:
return (
<HomeScreen />
// <Button onPress={() => firebase.auth().signOut()}>
// Log Out
// </Button>
);
case false:
return <LoginForm />;
default:
return <Spinner size="large" />;
}
}
render() {
const MainNavigator = StackNavigator({
Home: { screen: HomeScreen }
})
return (
<View>
<Header headerText="Authentication" />
{this.renderContent()}
</View>
);
}
}
export default App;
I'm getting a duplicate files message when using this setup.
This makes it really slow in a homestead/vagrant/virtualbox setup. (1 cpu and 2048MB mem)
Saving css gives me a 9s-10s waiting time.
publicPath: settings.urls.publicPath() gives an error when running devmode.
Changing it to publicPath: settings.urls.publicPath solves it.
Hey Andrew,
Possibly an issue with my understanding here but I was expecting manifest.json to link to compiled styles, as it does with app.js. I believe this is why Twigpack may not be updating styles for me in dev (it is loading the file hashes seen in manifest-legacy.json instead), as they are not linked to in the manifest.
Steps to reproduce:
yarn,yarn build,manifest.jsonFor me this file contains only:
{
"vendors~confetti~vue.js": "/dist/js/vendors~confetti~vue.b3ee5c6bd57567fd1554.js",
"vendors~confetti~vue.js.map": "/dist/js/vendors~confetti~vue.b3ee5c6bd57567fd1554.js.map",
"app.js": "/dist/js/app.ab10e7ef725aa5b4ef63.js",
"app.js.map": "/dist/js/app.ab10e7ef725aa5b4ef63.js.map",
"confetti.js": "/dist/js/confetti.45dcc9e48cccbf244297.js",
"confetti.js.map": "/dist/js/confetti.45dcc9e48cccbf244297.js.map",
"../sw.js": "/dist/../sw.js",
"js/precache-manifest.js": "/dist/js/precache-manifest.ce741f64cc80d2bdc9a10f37ffbb0859.js"
}
Compared to manifest-legacy.json:
{
"styles.css": "/dist/css/styles.0da40f7d31e778f4181a.css",
"styles.js": "/dist/js/styles-legacy.0da40f7d31e778f4181a.js",
"styles.js.map": "/dist/js/styles-legacy.0da40f7d31e778f4181a.js.map",
"vendors~confetti~vue.js": "/dist/js/vendors~confetti~vue-legacy.8391b437b7a12a4b13d4.js",
"vendors~confetti~vue.js.map": "/dist/js/vendors~confetti~vue-legacy.8391b437b7a12a4b13d4.js.map",
"app.js": "/dist/js/app-legacy.95d36ead9190c0571578.js",
"app.js.map": "/dist/js/app-legacy.95d36ead9190c0571578.js.map",
"confetti.js": "/dist/js/confetti-legacy.8e9093b414ea8aed46e5.js",
"confetti.js.map": "/dist/js/confetti-legacy.8e9093b414ea8aed46e5.js.map",
"css/styles.0da40f7d31e778f4181a.css.map": "/dist/css/styles.0da40f7d31e778f4181a.css.map",
"img/favicons/android-chrome-144x144.png": "/dist/img/favicons/android-chrome-144x144.png",
"img/favicons/android-chrome-192x192.png": "/dist/img/favicons/android-chrome-192x192.png",
"img/favicons/android-chrome-256x256.png": "/dist/img/favicons/android-chrome-256x256.png",
"img/favicons/android-chrome-36x36.png": "/dist/img/favicons/android-chrome-36x36.png",
"img/favicons/android-chrome-384x384.png": "/dist/img/favicons/android-chrome-384x384.png",
"img/favicons/android-chrome-48x48.png": "/dist/img/favicons/android-chrome-48x48.png",
"img/favicons/android-chrome-512x512.png": "/dist/img/favicons/android-chrome-512x512.png",
"img/favicons/android-chrome-72x72.png": "/dist/img/favicons/android-chrome-72x72.png",
"img/favicons/android-chrome-96x96.png": "/dist/img/favicons/android-chrome-96x96.png",
"img/favicons/apple-touch-icon-114x114.png": "/dist/img/favicons/apple-touch-icon-114x114.png",
"img/favicons/apple-touch-icon-120x120.png": "/dist/img/favicons/apple-touch-icon-120x120.png",
"img/favicons/apple-touch-icon-144x144.png": "/dist/img/favicons/apple-touch-icon-144x144.png",
"img/favicons/apple-touch-icon-152x152.png": "/dist/img/favicons/apple-touch-icon-152x152.png",
"img/favicons/apple-touch-icon-167x167.png": "/dist/img/favicons/apple-touch-icon-167x167.png",
"img/favicons/apple-touch-icon-180x180.png": "/dist/img/favicons/apple-touch-icon-180x180.png",
"img/favicons/apple-touch-icon-57x57.png": "/dist/img/favicons/apple-touch-icon-57x57.png",
"img/favicons/apple-touch-icon-60x60.png": "/dist/img/favicons/apple-touch-icon-60x60.png",
"img/favicons/apple-touch-icon-72x72.png": "/dist/img/favicons/apple-touch-icon-72x72.png",
"img/favicons/apple-touch-icon-76x76.png": "/dist/img/favicons/apple-touch-icon-76x76.png",
"img/favicons/apple-touch-icon-precomposed.png": "/dist/img/favicons/apple-touch-icon-precomposed.png",
"img/favicons/apple-touch-icon.png": "/dist/img/favicons/apple-touch-icon.png",
"img/favicons/apple-touch-startup-image-1182x2208.png": "/dist/img/favicons/apple-touch-startup-image-1182x2208.png",
"img/favicons/apple-touch-startup-image-1242x2148.png": "/dist/img/favicons/apple-touch-startup-image-1242x2148.png",
"img/favicons/apple-touch-startup-image-1496x2048.png": "/dist/img/favicons/apple-touch-startup-image-1496x2048.png",
"img/favicons/apple-touch-startup-image-1536x2008.png": "/dist/img/favicons/apple-touch-startup-image-1536x2008.png",
"img/favicons/apple-touch-startup-image-320x460.png": "/dist/img/favicons/apple-touch-startup-image-320x460.png",
"img/favicons/apple-touch-startup-image-640x1096.png": "/dist/img/favicons/apple-touch-startup-image-640x1096.png",
"img/favicons/apple-touch-startup-image-640x920.png": "/dist/img/favicons/apple-touch-startup-image-640x920.png",
"img/favicons/apple-touch-startup-image-748x1024.png": "/dist/img/favicons/apple-touch-startup-image-748x1024.png",
"img/favicons/apple-touch-startup-image-750x1294.png": "/dist/img/favicons/apple-touch-startup-image-750x1294.png",
"img/favicons/apple-touch-startup-image-768x1004.png": "/dist/img/favicons/apple-touch-startup-image-768x1004.png",
"img/favicons/browserconfig.xml": "/dist/img/favicons/browserconfig.xml",
"img/favicons/coast-228x228.png": "/dist/img/favicons/coast-228x228.png",
"img/favicons/favicon-16x16.png": "/dist/img/favicons/favicon-16x16.png",
"img/favicons/favicon-32x32.png": "/dist/img/favicons/favicon-32x32.png",
"img/favicons/favicon.ico": "/dist/img/favicons/favicon.ico",
"img/favicons/firefox_app_128x128.png": "/dist/img/favicons/firefox_app_128x128.png",
"img/favicons/firefox_app_512x512.png": "/dist/img/favicons/firefox_app_512x512.png",
"img/favicons/firefox_app_60x60.png": "/dist/img/favicons/firefox_app_60x60.png",
"img/favicons/manifest.json": "/dist/img/favicons/manifest.json",
"img/favicons/manifest.webapp": "/dist/img/favicons/manifest.webapp",
"img/favicons/mstile-144x144.png": "/dist/img/favicons/mstile-144x144.png",
"img/favicons/mstile-150x150.png": "/dist/img/favicons/mstile-150x150.png",
"img/favicons/mstile-310x150.png": "/dist/img/favicons/mstile-310x150.png",
"img/favicons/mstile-310x310.png": "/dist/img/favicons/mstile-310x310.png",
"img/favicons/mstile-70x70.png": "/dist/img/favicons/mstile-70x70.png",
"img/favicons/yandex-browser-50x50.png": "/dist/img/favicons/yandex-browser-50x50.png",
"img/favicons/yandex-browser-manifest.json": "/dist/img/favicons/yandex-browser-manifest.json",
"js/analytics.js": "/dist/js/analytics.2288a7f0b8dafb9384355f3cd86c0e83.js",
"js/workbox-catch-handler.js": "/dist/js/workbox-catch-handler.js",
"webapp.html": "/dist/webapp.html"
}
Is this behaviour expected? Any light you can shed would be much appreciated. TIA.
When building the project, the generated precache-manifest does only include javascript files but no stylesheets. This is due to the fact, that the workbox plugin is only included in the modern-build but stylesheets are only generated once for the legacy-build and thus are not available as assets in the modern-build.
Maybe it would be better to move stylesheets to the modern-build part so that they are visible to the "more relevant" modern-build parts?
When I run npm install I get the following warning:
warning postcss-preset-env > postcss-color-hex-alpha > postcss-values-parser > [email protected]: I wrote this module a very long time ago; you should use something else.
Referencing this issue nystudio107/craft#27 here
Hi!
I nearly got this working. Even with a webpack-dev-server with https and certificate stuff, but then I walked into a problem with hot module reloading and "background-image: url(/img/header1.jpg)" in homepage.pcss.I cannot get these ones to work:
url(/dist/img/header1.jpg)
url(/img/header1.jpg)
url(../img/header1.jpg)
url(../../img/header1.jpg)
url(/src/img/header1.jpg)I peeked here to see if I could get an example of a local image in pcss, but they a pointed towards an cloudfront url:
https://github.com/nystudio107/devmode/blob/master/src/css/components/global.pcssDo you have a solution for this to get it right?
Thanks,
Tim
Error on npm run build:
WARNING in Specifying 'cacheFirst'' in a 'runtimeCaching[].handler' option is deprecated. Please update your config to use 'CacheFirst' instead. In v4 Workbox strategies are now classes instead of functions.
Would it be possible to output multiple css files using this setup? I would like to set up theme using the same components but using different SCSS/PCSS variables.
I have tried importing multiple .pcss files in app.js but that doesn't seem to work:
import "../stylesheets/theme1.pcss"
import "../stylesheets/theme2.pcss"
Any help would be greatly appreciated!
Helloa,
First of all, a big thanks for all the work you put into your blogs and sharing this with us all.
Being pretty new to Craft I started reading your blogposts and started to introduce some of your methodologies here and there. Some were implemented easier than some others 😅.
I now started to merge your Annotated Webpack config in my project together with the whole templating structure you are using that i modified here and there but i ran in a little hickup. I know about the docker setup you have as well but somethings like the nginx setup and webperf is a bit much atm for the projects I'm running.
The issue
When i start the webpack config it doesn't seem to work like it's supposed to,
when going to localhost:8080 it's showing me a directory listing where I'm probably supposed to see the website through the webpack-dev-server. Also when changing things in the pcss files it doesn't seem to compile, I probably missed something silly...
For ease I pushed the setup I have now to: https://github.com/PjGeeroms/Projects2.0
I would appreciate it a TON if you could help me out, been stuck on this for a few days now 😭
Screenshots:
https://imgur.com/olJDa0m.jpg
https://imgur.com/N6B23Om.jpg
https://imgur.com/ZTXzOGE.jpg
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
