webpack-style-loader

I am working on a web app that uses Webpack to bundle modules. For whatever reason, the introduction of Firebase into the app is causing Webpack to throw an error. This error is occurring when Webpack attempts to load the Firebase module. How do I go about excluding Firebase from Webpack, but can still call import Firebase from 'firebase'; from within my JS files? Here are some screenshots of the error. pic1 pic2 tl;dr Exclude /node_modules/ from the babel-loader paths. Your 2nd pic shows the error on firebase-web.js:12 : Uncaught TypeError: Cannot read property 'navigator' of undefined

I have a directory structure like this: and inside node_modules: >node_modules >./bin >webpack.config.js >bootstrap >bootstrap.css >bootstrap.js I need to generate separate CSS and JS bundles like this: custom-styles.css, custom-js.js, style-libs.css, js-libs.js where style-libs and js-libs should contain syles and js files of all libraries like bootstrap and jQuery. Here's what I have done so far: webpack.config.js: const path = require('path'); const basedir = path.join(__dirname, '../../client'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const stylesPath = path.join(_

I have the following modules in my Webpack config: module: { preLoaders: [ { test: /\.vue$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ }, { test: /\.js$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ } ], loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel', include: projectRoot, exclude: /node_modules/ }, { test: /\.json$/, loader: 'json' }, { test: /\.html$/, loader: 'vue-html' }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\

The current practice for CSS with React components seems to be using webpack's style-loader to load it into the page in. import React, { Component } from 'react'; import style from './style.css'; class MyComponent extends Component { render(){ return ( <div className={style.demo}>Hello world!</div> ); } } By doing this the style-loader will inject a <style> element into the DOM. However, the <style> will not be in the virtual DOM and so if doing server side rendering, the <style> will be omitted. This cause the page to have FOUC . Is there any other methods to load CSS modules that work on

I'm using style-loader with webpack and react framework. When I run webpack in terminal i'm getting Module not found: Error: Cannot resolve module 'style-loader' in import.js file although i've specified the file path correctly. import '../css/style.css'; import React from 'react'; import ReactDOM from 'react-dom'; import jQuery from 'jquery'; import TopicsList from '../components/topic-list.jsx'; import Layout from '../components/layout.jsx'; webpack.config.js: var webpack = require('webpack'); var path = require('path'); var BUILD_DIR = path.resolve(__dirname, 'build'); var APP_DIR = path

This WARNING is printed ~20 times when running webpack - it processes and bundles just fine, but what does it mean? How do I get rid of it? Googling around provides little to no help unfortunately. Here's my webpack config: const ExtractTextPlugin = require("extract-text-webpack-plugin"); var webpack = require("webpack"); module.exports = { entry: { dashboard: './js/main.js', vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap", "vis",], }, output: { path: "../public", filename: 'bundle.js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: