.../styles.css Unexpected character '@'

[CrazyUmka]

Hi all! I get something strange error, maybe i did wrote wrong config file. But if the file is styles.css present @charset "UTF-8", the parser generates an error.

Example index.js

require('./styles.css')

Example style.css

@charset "UTF-8"
body {
 ...
}

[benbarber]

I am getting the same issue as well. Build runs fine with no "@charset" present.

[tleunen]

Same issue with @font-face :/

[Vetnametz]

same issue with @import "~quill/dist/quill.snow.css";

[stinoga]

Anyone figure out the issue here? I'm seeing the same thing with @import.

[iceleaf97]

I got the same issue with @font-face Add some code in webpack.config.js file and it does work. { test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

[morious]

@iceleaf97 couldn't get it to work with your suggestion. Using Webpack 2.

[jrood]

Same issue here with @charset. It seems I only have this issue in Webpack 2, not Webpack 1.

[jonlambert]

Same issue here. Extra '@' character comes from a third-party lib so I'm thoroughly stuck with this bug.

[iraklisg]

same issue trying to load 'element-ui' css

[timse]

can someone create a repository where the bug is reproduceable?

just tried it myself and cant reproduce.

[vladsh91]

same issue with @keyframes

[pedroborges]

Same issue with mint-ui and Laravel Mix:

ERROR in ./~/mint-ui/lib/cell/style.css
Module parse failed: /Users/name/Code/project/node_modules/mint-ui/lib/cell/style.css Unexpected token (10:0)
You may need an appropriate loader to handle this file type.
| /* Radio Component */
| /* z-index */
| .mint-cell {

ERROR in ./~/mint-ui/lib/font/style.css
Module parse failed: /Users/name/Code/project/node_modules/mint-ui/lib/font/style.css Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
|
| @font-face {font-family: "mintui";
|   src: url(data:application/x-font-ttf;base64,AAEAAAAPAIAAAwB…

[timse]

can anyone here provide a reproducable example? :)

[iraklisg]

@timse not pretty sure if it is a css-loader or a vue-loader issue, but when running npm run dev using the laravel-mix@0.5.16 webpack wrapper with the pre-configured webpack.config.js that ships with. I get the following error when trying to import the element-ui component's css

error  in ./~/element-ui/lib/theme-default/index.css

Module parse failed: /home/igeorgas/webApps/apptree2/node_modules/element-ui/lib/theme-default/index.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

| @charset "UTF-8";.el-breadcrumb:after,.el-breadcrumb:before,.el-form-item:after, ... /*more output*/ ...

In my entry point is

/**
 * Import project's dependencies
 */
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-default/index.css"; // <--- this line causes the error
import locale from "element-ui/lib/locale/lang/en";

/**
 * Install required Vue plugins
 */
Vue.use(ElementUI, {locale});

// more code....

My package.json

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {
    "axios": "^0.15.2",
    "element-ui": "^1.0.7",
    "jquery": "2.2.3",
    "lodash": "^4.16.2",
    "vue": "^2.1.8",
    "vue-router": "^2.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-runtime": "^6.22.0",
    "css-loader": "^0.26.1",
    "file-loader": "^0.9.0",
    "laravel-mix": "^0.5.9",
    "node-sass": "^3.13.0",
    "scss-loader": "^0.0.1",
    "style-loader": "^0.13.1"
  }
}

[iraklisg]

@timse, all I made some progress. I noticed that the webpack.config.js file that ships with laravel-mix@0.5.16 lacks the test for css files.

So I added the following lines and the error gone

{
    test: /\.css$/,
    loader: 'style-loader!css-loader'
},

Now the assets are bundled just fine

[pedroborges]

I'm new to Webpack and didn't get what the error cause was for hours… Later I found it was lacking the CSS loader and the snippet bellow fixed the issue for me:

// webpack.mix.js

const { mix } = require('laravel-mix');

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  }
})

mix.js('resources/assets/js/main.js', 'public/js')
   .sass('resources/assets/sass/main.scss', 'public/css');

In my case I didn't modify the Webpack config directly, instead I extended Laravel Mix configuration.

To use Mint UI I also had to install the babel-plugin-component package and add a .babelrc file:

 npm install babel-plugin-component --save-dev

// .babelrc

{
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

[jrood]

@timse reproduced here https://github.com/jrood/unexpected-char-bug-reproduced

[jrgleason]

I am seeing something similar I have the following in a less file..

@import "~angular-material/angular-material.css";
@import "~golden-layout/src/css/goldenlayout-base.css";
@import "~golden-layout/src/css/goldenlayout-dark-theme.css";

And I get

.../global.less Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

My webpack config looks like this...

{
          test: /global\.less$/,
          loaders: ["style-loader","css-loader","less-loader"]
},

[timse]

@jrood if i remove this line: https://github.com/jrood/unexpected-char-bug-reproduced/blob/master/webpack.config.js#L19

it works

[jrood]

Oh my, it was that slash in the path wasn't it. Thanks @timse

[timse]

not sure, but i guess the reason this appears to be a problem is, that its at the top of the file so it looks like it has something to do with @ like @charset or @font-face but the problem just is, that no one handles the css probably :)

hope that fixes it for you

[timse]

oh and try to update to the latest version of this extract-text-plugin

[FastAndFluid]

I am getting this error without using @charset etc. If my stylesheet contains a single "background-color" CSS setting everything is fine, but as soon as I change it to "background-image" then the error appears. Can someone give me a clue as to why perfectly valid CSS causes Webpack to get upset?

Here's a stylesheet that works:

.fr-page-bg {
    background-color: red;
} 

Here's the modified stylesheet that breaks webpack:

.fr-page-bg {
    background-image: url('../../../img/page-backgrounds/page-not-found-bg.jpg');
}

And the error that results:

ERROR in ./src/img/page-backgrounds/page-not-found-bg.jpg
Module parse failed: D:\forgerock-poc-central\src\img\page-backgrounds\page-not-found-bg.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./src/app/features/page-not-found/page-not-found.css 6:196-258
 @ ./src/app/features/page-not-found/page-not-found.css
 @ ./src/app/features/page-not-found/page-not-found.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.browser.ts
 @ multi (webpack)-dev-server/client?http://localhost:4000 ./src/main.browser.ts
webpack: Failed to compile.

If I modify the path to the image so that it is incorrect I don't get the error - instead an error that the file path could not be resolved (which I would expect), so this seems to be something specific about the found image although I've tried different formats (jpg, png) and they all give the same error. Module not found: Error: Can't resolve '../../img/page-backgrounds/page-not-found-bg.jpg'

[michael-ciniawsky]

@FastAndFluid Is the Image loaded via file-loader?

[FastAndFluid]

UPDATED: I wasn't using file-loader as it wasn't included in the angular2-seed webpack starter project I was using. Have now installed file-loader and using it for images and the issue is fixed. Thanks for the heads-up.

No it isn't. Should it be? I'm not currently using a loader for images. Here is my webpack.config file, effectively what I got with the angular2-seed project with slight amendment to reflect renaming of latest version of angular2-router-loader.

module: {
    loaders: [
      // .ts files for TypeScript
      {
        test: /\.ts$/,
        loaders: [
          'awesome-typescript-loader',
          'angular2-template-loader',
          'angular-router-loader'
        ]
      },
      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
      { test: /\.html$/, loader: 'raw-loader' }
    ]
  }

[VoloshchenkoAl]

@FastAndFluid try to use url=false in css-loader { test: /\.css$/, loaders: ['to-string-loader', 'css-loader?url=false'] },

[alexander-akait]

@CrazyUmka @VoloshchenkoAl @iraklisg Can any of you create minimal reproduced test repo? This would allow in the very near future to resolve the error :+1:

[gkatsanos]

Same error here,

ERROR in ./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/~/bootstrap-sass/assets/stylesheets"]}!./sass/main.scss
    Module parse failed: /Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/node_modules/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/node_modules/bootstrap-sass/assets/stylesheets"]}!/Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/sass/main.scss Unexpected character '@' (1:0)
    You may need an appropriate loader to handle this file type.
    | @charset "UTF-8";
    | /* generic color names */
    | /* typography:color */

Here are my two tests:

      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader', use: 'css-loader!postcss-loader',
        })
      },
      {
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
          use: {
            loader: "sass-loader",
            options: {
              sourceMap: true,
              includePaths: [
                path.resolve(__dirname, './node_modules/bootstrap-sass/assets/stylesheets'),
              ]
            }
          },
        })
      }

[alexander-akait]

@gkatsanos expected, where css-loader for sass/scss files and fallback with style-loader?

[alexander-akait]

@gaearon see https://github.com/webpack-contrib/extract-text-webpack-plugin#extracting-sass-or-less

[michael-ciniawsky]

      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader', use: 'css-loader!postcss-loader',
+         fallback: 'style-loader'
+         use: [ 'css-loader', 'postcss-loader' ]
        })
      },
      {
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
-         use: {
-           loader: "sass-loader",
-           options: {
-            sourceMap: true,
-            includePaths: [
-                path.resolve(__dirname, './node_modules/bootstrap-sass/assets/stylesheets'),
-              ]
-            }
-          },
+         use: [
+            { loader: 'css-loader', options: { importLoaders:  1, sourceMap: true } }
+            {
+              loader: "sass-loader",
+              options: {
+                sourceMap: true,
+                includePaths: [
+                  path.resolve(__dirname, './node_modules/bootstrap-sass/assets/stylesheets'),
+                ]
+              }
+            }
+         ]
       })
      }

webpack >= 2.2.1 && ETWP >=v2.0.0 :)

[alexander-akait]

/cc @michael-ciniawsky i think we should improve webpack docs about loaders, because many people do not understand how it works, we will constantly receive issues about bugs. Also be good to add this link to this docs in .gitlab issue's template.

[michael-ciniawsky]

Also if you want SASS && CSS in a separate file each, then use two instances of ETWP

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const extractCSS = new ExtractTextPlugin({ filename: 'extractedCSS.css'})
const extractSASS = new ExtractTextPlugin({ filename: 'extractedSASS.css'})

const config = {
   module: {
      rules: [
         ...
         test: /\.css$/
         use: extractCSS.extract(...)
         ...
         test: /\.sass$/
         use: extractSASS.extract(...)
      ]
   },
   plugins: [
     extractCSS,
     extractSASS
   ]
}

[michael-ciniawsky]

@evilebottnawi Yep it's a mess 😉

[gkatsanos]

@evilebottnawi @michael-ciniawsky thanks a million for helping me fix it!

@evilebottnawi the problem with https://github.com/webpack-contrib/extract-text-webpack-plugin#extracting-sass-or-less is that their example doesn't have options.. didn't think use could be an array of objects..

but I must say not one in a million I would have figure it out on my own :( and I did read a dozen configuration examples :( can't this be simplified? I mean, from a purely high-level perspective, if I need to compile SCSS to CSS, why do I need to use so many different loaders? it's one job .. (I understand that's oversimplifying but ...)

[gkatsanos]

ERROR in ./fonts/adriane.eot
    Module parse failed: /Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/fonts/adriane.eot Identifier directly after number (1:1)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader?{"importLoaders":1,"sourceMap":true}!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/~/bootstrap-sass/assets/stylesheets"]}!./sass/main.scss 6:134702-134733

    ERROR in ./fonts/adriane.woff2
    Module parse failed: /Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/fonts/adriane.woff2 Unexpected character '' (1:4)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader?{"importLoaders":1,"sourceMap":true}!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/~/bootstrap-sass/assets/stylesheets"]}!./sass/main.scss 6:134785-134818

    ERROR in ./fonts/adriane.woff
    Module parse failed: /Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/fonts/adriane.woff Unexpected character '' (1:4)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader?{"importLoaders":1,"sourceMap":true}!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/~/bootstrap-sass/assets/stylesheets"]}!./sass/main.scss 6:134851-134883

    ERROR in ./fonts/adriane.ttf
    Module parse failed: /Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/fonts/adriane.ttf Unexpected character '' (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader?{"importLoaders":1,"sourceMap":true}!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/~/bootstrap-sass/assets/stylesheets"]}!./sass/main.scss 6:134915-134946

    ERROR in ./fonts/neuzeit-regular.eot
    Module parse failed: /Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/fonts/neuzeit-regular.eot Unexpected character '' (1:2)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader?{"importLoaders":1,"sourceMap":true}!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/~/bootstrap-sass/assets/stylesheets"]}!./sass/main.scss 6:135042-135081 6:135104-135143

    ERROR in ./fonts/neuzeit-regular.woff2
    Module parse failed: /Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/fonts/neuzeit-regular.woff2 Unexpected character '' (1:4)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader?{"importLoaders":1,"sourceMap":true}!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/~/bootstrap-sass/assets/stylesheets"]}!./sass/main.scss 6:135195-135236

    ERROR in ./fonts/neuzeit-regular.woff
    Module parse failed: /Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/fonts/neuzeit-regular.woff Unexpected character '' (1:4)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader?{"importLoaders":1,"sourceMap":true}!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/~/bootstrap-sass/assets/stylesheets"]}!./sass/main.scss 6:135269-135309

    ERROR in ./fonts/neuzeit-regular.ttf
    Module parse failed: /Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/fonts/neuzeit-regular.ttf Unexpected character '' (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader?{"importLoaders":1,"sourceMap":true}!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/Georgios/Development/rocket-internet/INTROCK2/drupal/web/themes/rocket/~/bootstrap-sass/assets/stylesheets"]}!./sass/main.scss 6:135341-135380

any hint on that one?

[alexander-akait]

@gkatsanos use { loader: 'sass-loader', options: { someOptions: true}} instead just sass-loader string

[michael-ciniawsky]

Assets need to be loaded via an appropiate loader 😆, you need url/file-loader and add a rule to module.rules for each file type (extension)

rules: [
  // css
  // sass
  {
     test: /\.(gif|png|jpg)$/,
     use: [ 'file-loader' ]
  },
  {
     test: /\.(eot|ttf|woff|woff2)$/
     use: [ 'url-loader' ]
  }
]

I recommend you use a few simple .css/.sass files and test if that works (that == CSS Setup) :), no url() (Assets) etc. from the start, since resolving the correct asset paths especially as a beginner will bug you many times I swear you that 😛. Use the progressive approach instead and add things step by step to get familiar with the 'webpack way'

[gkatsanos]

Yeah I understand that. I am migrating a big project from Gulp to Webpack and want to get it done asap. sorry for polluting this bug. Is it normal that webpack is actually taking all the fonts/images now and moves them to the output directory? I'd prefer to leave the files where they are.. shall I use exclude?

[alexander-akait]

@gkatsanos it is bad practice, because other loaders and plugins can change content files (example compress or minify), be good have two directory: src for source and build for webpack output. But you can do this, just use name: '/path/to/[name][ext]' for file-loader, full information about interpolation names https://github.com/webpack/loader-utils#interpolatename

[michael-ciniawsky]

If your dependency grap isn't to complex, you could do that yes, the reason to load them and moved them to outpu is mainly bc of

File Tree (Grunt, Gulp)

|– css
|   |– all styles...
|– media
|    |– all assets...
|– js 
|   |– all scripts...
|
|– index.js
|– index.css
|– index.html
|– gulpfile.js

Dependency Graph (webpack)

|– components
|  |– component (1)
|  |  | -index.js
|  |  |  |- index.scss
|  |  |  |- icon.svg
|  |  |  |– img.png 
|  |  |  | -index.js
|  |  |  |– subcomponent (1.1)
|  |  |  |  |- index.scss
|  |  |  |  |- icon.svg
|  |  |  |  |– img.png  
|  |– component (2)     
|  |  | -index.js
|  |  |- index.scss
|  |  |- icon.svg
|  |  |– img.png 
|
|– entry.js
|– index.html
|– webpack.config.js

You will get this all the time, when storing them in one place :)

import foo from '../../../component'

className {
   background-image: url('../../../image.png')
}

Thats why url/file-loader etc are needed at some point to have the webpack resolver dealing with that deps graph 😛

⚠️ If you don't use a component based architecture atm and there are no plans to also rework this, there is less benefit in using webpack :warning:

[gkatsanos]

@michael-ciniawsky you're killing me now as I spent 8h on this already :) It's a Drupal (php CMS) website, so definitely not component based architecture - and yes now all the problems make sense.. I was using Gulp with Browserify but I was encountering problems with proper import of ES6 modules and in general it wasn't at all straightforward..

[gkatsanos]

@evilebottnawi I didn't get how to completely ignore fonts and images ; essentially there's no "src" and "dist" for my images as I've already included them in the "dist" directory.. this codebase I'm working on doesn't have a clear separation between src and dist (although I could make it now..) although, many images for example are referenced/included in the CMS database directly so webpack has no reference to them .. so this is problematic :(

[gkatsanos]

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const exclude = /node_modules/;

module.exports = {
  entry: {
    "js/dest/bundle": "./js/src/main",
    "main": "./sass/main.scss",
    "frontpage": "./sass/main.scss"
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        exclude: exclude,
        use: [
          "babel-loader",
          "eslint-loader"
        ]
      },
      { test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
      { test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/, loader: 'file-loader?limit=100000' },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader'],
        })
      },
      {
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: "css-loader",
              options: {
                importLoaders:  1,
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true,
                includePaths: [
                  path.resolve(__dirname, './node_modules/bootstrap-sass/assets/stylesheets'),
                ]
              }
            },
          ],
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ // define where to save the file
      filename: "./css/[name].css",
      allChunks: true,
    }),
  ],
};

so what happens now is webpack is generating a bundle.js main.css frontpage.css (correctly) but also a main.js and a frontpage.js (side effect).. it also moves all images in my ./

[alexander-akait]

@gkatsanos I'm not too familiar with with drupal, for wordpress exist https://github.com/roots/sage theme (but it is only beta), maybe it will help to inspire and rework the structure.

[alexander-akait]

@gkatsanos also try to search in google github drupal webpack :smile: seems not very bad https://github.com/teamdeeson/deeson-webpack-config, also you can see https://github.com/TallerWebSolutions/drupal-react-boilerplate. I think in the beginning it is necessary to work out the structure of the theme for the components of the form, not necessarily in the form as above, this is just one of the known representations of the structure, but you have the right to make it whatever you want

[michael-ciniawsky]

Maybe if JS only, better take a look at Rollup first and just ES2015 modulize the JS as a starting point :), it's not necessary to utilize webpack here if the architecture doesn't match (best/easiest example for getting started would be a simple react app). Gulp and webpack are similar in terms of 'you can build your stuff from start to finish' but that's also where the similarity ends 😛 . The concepts are enterily different approaches File Directory (File Tree) vs. Dependency Graph (parse, walk && resolve the import x from 'path/to/x' / require('path/to/x') statements)

[michael-ciniawsky]

- { test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/, loader: 'file-loader?limit=100000' }

url-loader base64 encodes your asset(s) into the bundle, when file size < limit, otherwise it will fallback to file-loader under the hood. Use file-loader additionally if you have assets you don't want to be encoded at all :)

[michael-ciniawsky]

The CMS in use isn't important 🙃 It's about the front-end architecture. Serving a app.bundle.js + index.html works with any back-end :). Try out a react app with webpack and get familiar with the shift in the mental model first. Saves you a lot of pain... Again if PHP/Python/Java && CMS X, Y, Z in the back-end isn't really relevant

[gkatsanos]

I totally understand. I've built 1-2 SPA's with Vue / Webpack so I've used the Component Based Architecture. Although I must say there are often times you need a concept of "Page" rather than a "Component" so I'm not sure if everything can be a Component in that sense..

Anyway. now I'm left with my half-baked webpack config and don't know how to proceed and if I should just stash and go back to Gulp. There is no concept of components in Drupal, so I will have to output all JS and CSS in the same directory by webpack's philosophy right?