Questions tagged [webpack-4]

1

votes
0

answer
438

Views

RxJs 5 - TreeShaking with webpack 4

I'm using RxJS 5.5 and I'm importing operators like: import { mergeMap } from 'rxjs/operators'; import { fromPromise } from 'rxjs/observable/fromPromise'; Since I upgraded webpack 3 -> 4, I see that whole rxjs package is imported: Seems like aliases configuration in webpack no longer work: const rxP...
Tomasz Mularczyk
1

votes
1

answer
392

Views

React components are not rendering/not showing up on browser

I have a react project with all the latest npm packages. Please check github link for package.json file I can see the bundle.js file created and my components on chrome developers tools, however I cannot see those components render on browser. git repo Please refer to image below React devtool tab
supritshah1289
1

votes
0

answer
2k

Views

Webpack 4: content hash filename?

Is there a way to put the hash of the chunk content into the filename of each file, rather than the hash of the entire chunk? I'm using this right now: output: { filename: '[name].[chunkhash].js', chunkFilename: 'chunk.[chunkhash].js', }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].[hash...
mpen
1

votes
0

answer
48

Views

Webpack multi-page public file extraction

I use webpack4, Extracting css using extract-text-webpack-plugin. // ... plugins: [ ...htmls, new ExtractTextPlugin('style/[name].[contenthash].css') ] // index.css // home.css // about.css It's all okay, Correct output. Until I use optimization.splitChunks to extract the react and react-dom f...
fourre
1

votes
0

answer
1k

Views

ERROR in chunk app [entry] when upgrading to Webpack 4 in Vue.js

I am faced with an error I don't understand while trying to upgrade a Vue app to use Webpack 4. Here is how my webpack base configuration looks like; 'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-...
kinsomicrote
1

votes
0

answer
120

Views

Is react-toolbox ready for webpack 4?

I am having a dickens of a time getting the default styles of certain components (namely buttons with icons and dialogs) to display when compiled with Webpack 4 (using the MiniCssExtractPlugin in place of the ExtractTextPlugin. Has anyone else found this to be the case when upgrading to Webpack 4? a...
Shawn Rice
1

votes
0

answer
356

Views

Using webpack's splitChunks option to cache a large file

tl;dr Using Webpack's url-loader, I load some 2300 40px by 30px png icons (small Pokémon sprites) into an array resulting in ~2.2MB of minified JavaScript. These images and the module that wraps them virtually never change and have no dependencies that do change. I want to pull them into a separa...
dx_over_dt
1

votes
1

answer
326

Views

“You may need an appropriate loader to handle this file type” with bsb react template

I have a file View.js, that contains a stateless component: import Button from 'material-ui/Button'; import React from 'react'; const View = (props) => ( {props.name} ); export default View; Then I wrote a wrapper ViewWrapper.re, to interoperate with reasonml [@bs.module] external viewJS : ReasonRe...
zero_coding
1

votes
0

answer
566

Views

Loading custom typeface fonts with webpack 4

Tried different ways to load the custom Gugi/Roboto font in webpack 4. None seems to load the font properly. But, when I install the font in system, it works as expected - indicating that Css and app works fine. Thus, it seems to be a webpack problem which I can't figure. index.js import 'typeface-...
user3499836
1

votes
1

answer
938

Views

ConcurrentCompilationError: You ran Webpack twice

Need some help in setting up Webpack 4 + Browsersync. I get following error when trying to webpack --watch but can't figure is it problem my configuration or is the browsersync-webpack-plugin not updated to support v4. ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a...
Bobz
1

votes
0

answer
250

Views

How to load local CSS with react-styleguidist 7 and Webpack 4

I want to load local 3rd party css (eg font-awesome icons) as part of my styleguide. As many components uses the same CSS, I want it to be loaded automatically and included as part of the static build. I settled on using mini-css-extract-plugin to accompolish this, but styleguidist maintainer @sape...
bugzpodder
1

votes
0

answer
436

Views

Duplicated css files using webpack MiniCssExtractPlugin and OptimizeCSSAssetsPlugin

I'm getting this problem of duplicated css files under dist/css My webpack configuration is as follows: webpack.base.config.js /* eslint quote-props: ['off'] */ 'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig =...
1

votes
0

answer
23

Views

Webpack code splitting loading paths

I am splitting my code using the webpack import() based on some configuration files as below: setClientId({commit}, clientId) { return import(`@/configs/client.${clientId}.js`).then((configImport) => { const config = configImport.default commit('setClientId', clientId) commit('setClientConfig', conf...
dendog
1

votes
0

answer
240

Views

Inject webpack separated css file into html head

In my current setup, webpack bundles css that has been imported in .js files into a separate style file and loads it after the .js bundle has finished loading. Because the .js bundle is loaded after html (end of /body tag), the page does not initially have styling. Current webpack setup: module.expo...
Heiki
1

votes
1

answer
235

Views

Webpack 4 splitChunks and libraryTarget

I have some entries: app, vendor, polyfills, bootstrap and output as library ['app', '[name]'] and libraryTarget var. In the browser app variable contains: {bootstrap: Module, polyfills: Module, vendor: Module, app: Module} If I use optimization.splitChunks to move rxjs to bootstrap chunk app variab...
Alexey Savchuk
1

votes
0

answer
438

Views

How to resolve loader in webpack 4?

Using webpack version 4.6.0 I need to resolve the path of a loader using webpack. The loader is used like this in a node_modules dependency: const loadedIndex = require('!!../loaders/A-loader!./index.js'); I want to override this loader A-loader with another B-loader. Here is how my project is struc...
Adrien Gadaud
0

votes
0

answer
2

Views

babel 7.x - Can't resolve 'core-js/modules/es.array.concat'

I upgraded babel 6.x -> 7.x but having issues running Webpack. It is complaining about missing core-js/modules/*. My babel.config.js is in the root directory. I converted the previously existing .babelrc to js (.babelrc also produced the same errors). I am guessing it is some collision with all the...
Elijah
1

votes
0

answer
111

Views

Serving two entrypoints with webpack-server and Webpack4

We have two entrypoint (index and auth), that we want to be served using separate routes in development. We want the following routing when we run webpack-serve for development. / is routed to the index entry point. /auth is routed to the auth entry point. Our webpack.common.js looks like the follo...
TheJediCowboy
1

votes
0

answer
291

Views

Webpack 4 config not showing source maps files

I have configuration webpack like: const extractSass = new ExtractTextPlugin({ filename: '[name]', disable: process.env.NODE_ENV === 'development' }); module.exports = (env, options) => { console.log(`env: ${env} mode: ${options.mode}`); return { entry: { 'css/index.css': [ entryDir + '/scss/index.s...
user2217288
1

votes
0

answer
124

Views

Uncaught TypeError when setting up Webpack 4 in a simple Angular 6 application

I'm trying to integrate Webpack 4 into a very simple Angular 6 application that I built before (the Angular 6 quickstart) and, while my build succeeds (with some warnings but they're warnings about stuff that I can't really change), I get an Uncaught TypeError when the page loads that keeps anything...
user2161312
1

votes
2

answer
421

Views

Webpack Hot Server Middleware not rendering with Webpack 4 and SSR

The 'serverRenderer is not a function' error pops us in development when adding webpack-hot-server-middleware. Below is my express.js and config/webpack.dev-ssr.js. Some issues on Github suggested webpack-hot-server-middleware loads before the compiler returns but I don't know how to verify that. ex...
El Anonimo
1

votes
1

answer
1.2k

Views

webpack dev server not building and reloading index.html

I am using webpack v4 right now trying to add webpack-dev-server to my project. The Issue I am facing here is when i run the webpack-dev-server command my it opens a local server in my default browser but not serving the compiled assets and also is not watching the files for the changes. I haven't i...
Chandra Shekhar
1

votes
1

answer
59

Views

Extract code from certain directories into a separate bundle in webpack 4

I have the following setup. I have a bunch of entry points (all with their own html page). All entries are located in /src/entry/. External code is located in /node_modules. And I have a bunch of internal code that is used by the entries as well. This is located in /src/node_modules/ in my case. No...
Kasper
1

votes
1

answer
421

Views

How to handle global functions and global variables using webpack

addMethod.js function add(){ // do something } Let say, I have a function add which can be accessed globally. But when I bundled this file with webpack(v4) I am facing an error add of undefined when I ran that file in the browser. So far in my research, I have only come across people recommending th...
1

votes
1

answer
162

Views

Webpack 4 bundle splitting, sharing scope between bundles

We have recently split our main app.js bundle into many small bundles (small apps) via multiple entry points (functionality that comes out of the box with webpack 4) Each bundle has different vue components inside and they import the vuex store which has all the modules. Before splitting the bundles...
DeanR
1

votes
1

answer
385

Views

Custom helper with handlebars-loader

I'm using this handlebars-loader for webpack 4. Now I wanted to use a custom helper, but i only get this error ERROR in Template execution failed: TypeError: __default(...).call is not a function ERROR in TypeError: __default(...).call is not a function this is my webpack.config //handlebars-loade...
Gregor Oi
1

votes
2

answer
212

Views

webpack module test the regexp not work

module: { rules: [ { test: /\.(jpg|png)$/, exclude: /(^logo\.png$|^logo3\.png$)/, use: [{ loader: 'url-loader', options: { limit: 15 * 1024, name: 'imgs/[name].[ext]' } }] }, { include: /(^logo\.png$|^logo3\.png$)/, use: [{ loader: 'file-loader', options: { name: 'imgs/[name].[ext]' } }] } ] } This...
Z blast
1

votes
0

answer
122

Views

Importing js modules from mjs files webpack4

Ok, so this has been bit of a trip. On the client side, when importing three.js, why do 'mjs' files 'import' : node_modules/three/build/three.module.js 'js' files 'import' : node_modules/three/build/three.js I have a web app sharing some files with node. The shared files are name 'mjs' to have nat...
FrozenKiwi
1

votes
0

answer
64

Views

Build failure while using Webpack4 in AngularJS1.5.11

I am working on an AngularJS Project to configure webpack for bundling purpose. I am using webpack4 for the same. Below is the config file. webpack.config.js: const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTe...
JS Developer
1

votes
1

answer
153

Views

this is resolved to undefined in UMD module by babel

I had already posted a question about this, i managed to solve it with a workaround but now i have multiple UMD modules, third party modules, and it no longer makes sense to change the module myself to make it transpile. this is what my .babelrc looks like { 'presets': [ 'react', 'es2015', 'es2017',...
kfc
1

votes
0

answer
214

Views

Assets loaded from CSS using url() not using CDN

I am using a CDN, and have set __webpack_public_path__ to the CDN URL. CSS and JS files are loaded by webpack from the CDN. However, assets loaded from CSS using url() are downloaded from the app's domain. Example: app.css contains: .close-button { background-image: url('/images/close-btn-bg.png') }...
b2238488
1

votes
0

answer
205

Views

Webpack 4 static assets not reloading with HtmlWebpackPlugin

I am configuring a simple webpack 4 setup using npm and HtmlWebpackPlugin to generate an index.html and it all works well, except it only generates the file when running my production build, and changes to the template are not automatically reflected in the browser. This is my webpack.config.js file...
bparticle
1

votes
1

answer
164

Views

webpack-node-externals - JavaScript heap out of memory

This is the Webpack config: const webpack = require('webpack'); const nodeExternals = require('webpack-node-externals'); module.exports = { entry: './server/index.js', target: 'node', externals: [nodeExternals()], output: { path: __dirname, filename: 'server.js', publicPath: '/' }, module: { rules:...
Andrés Montoya
1

votes
1

answer
145

Views

Custom Javascript library using ECMA 6 and webpack 4

My sum.js file as below var mathOp = { sum : function(a,b){ return a+b; } } export default mathOp; My index.js file as below (It will have multiple import file and tree shaking later point of time) import mathOp from './sum'; export default mathOp; I have made a bundle file bundle.js using we...
Parth Patel
1

votes
0

answer
191

Views

webpack 4 - app not loading at root in production mode

I have nothing fancy about my webpack.config.js file. More or less the minimum required to get my react app running. Everything loads fine the way it should in dev mode, with webpack-dev-server. However, for some reason I can't explain, it does not in production mode. It will load at /dist/ entry:...
John Doe
1

votes
1

answer
66

Views

css modules query breaks css rules with latest css-loader

With css-loader { test: /\.s?css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', query: { modules: true, localIdentName: '[name]-[local]-[hash:base64:8]' } }, { loader: 'sass-loader'} ] } configured that way the css-loader seems to not find css rules under class names. The css rules li...
El Anonimo
1

votes
0

answer
202

Views

Can anyone provide a webpack4 & Karma configuration that works?

I recently upgraded to Webpack4 and I am running into issues where karma start will run my webpack build and then do nothing. Just sits there. I was curious if anyone had a webpack4 configuration and a karma configuration that works they could share. 'webpack': '4.16.3', 'webpack-cli': '^3.1.0', 'w...
Corey
1

votes
0

answer
611

Views

You have installed webpack-cli and webpack-command together

When I try running npm run build for a new webpack build I get You have installed webpack-cli and webpack-command together. To work with the 'webpack' command you need only one CLI package, please remove one of them or use them directly via their binary. I think I installed them globally. I tried,...
ronoc4
1

votes
1

answer
170

Views

Migration from Gulp to Webpack 4 - concatenate scripts without resolving dependencies

I need to migrate legacy system to webpack-4 from gulp. I stucked with concatenating few scripts into one. My goal is to achieve pure concatenation without additional staff generated by webpack. So result from gulp must equals result from webpack. I used webpack-concat-plugin. Here is my webpack.con...
Rafal Cypcer
1

votes
2

answer
67

Views

what is the intention of extract all css in a single file

First, I don't understand what is the meaning for extract all css in a single file, and What's the profit of doing that? Moreover, I try use splitChunks of webpack4 to extract css but it is produced a js files. I think, it is not supposed to be produces a css files? this is my code. splitChunks: { c...
gourdbaby

View additional questions