Preloading assets with webpack

I have a preloader that takes an array of image URLs and starts loading the files as soon as my app is opened. Every time I use require() on an image I would like webpack to add that image's URL to the array that my preloader will be using. My first inclination is to create a new loader to chain together with file-loader (which I'm currently using for images). The new loader would keep track of my images and save them to a JS file in the form of an array, which my preloader would import. But I

Webpack Uncaught ReferenceError: exports is not defined

I am trying to use webpack to babel and package my web-app (React + ES6). However whenever I run the webpack-dev-server and hit the page I get bundle.js:1 Uncaught ReferenceError: exports is not defined What am I doing wrong? Here is my webpack configuration: var webpack = require('webpack'); module.exports = { entry : [ './lib/index.js' ], output : { path : __dirname + '/dist/', libraryTarget: 'commonjs', filename : 'bundle.js' }, plugins :

Module not found: Error: Cannot resolve module 'react' when I use webpack

would really appreciate help on this one: I'm unable to build using webpack, I get a short list of errors starting with: Module not found: Error: Cannot resolve module 'react' in ../client/front_desk.jsx and then ending up with a long list that looks like: Module not found: Error: Cannot resolve 'file' or 'directory' ../node_modules/process/browser.js Here's my webpack.config.js: const webpack = require('webpack'); const commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js')

Why does Webpack put brackets around parameters passed in using --define?

I want to pass parameters into my website at compile time depending on whether it's for dev, test, or live. So I build my app like this (using the integrated DefinePlugin) webpack --define WEBPACK_CONFIG.webserviceUrl="NARF" and use the parameter like this declare const WEBPACK_CONFIG: any; const config = { webserviceUrl : WEBPACK_CONFIG.webserviceUrl }; export = config; But the compiled output has brackets around my value /***/ 243: /***/ function(module, exports, __webpack_

how to retain original url() when using webpack sass-loader

Is there a way to keep my original images/ directory structure post webpack process of a SASS file. I don't want to hash the images or inline them. I want the URL() to look exactly as they were, relative to the sass file like so: ../images/* original SCSS: background: url(../images/icon.gif); webpack config: { test: /\.css$/, loader: 'raw-loader' }, { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!resolve-url!sass?sourceMap') }, { test: /\.(png|gif|bmp)$/, loader: "file-loader"

Webpack plugin, when build a virtual module?

I'm making a webpack plugin which extract content from javascript files, and then inject a new module generated from that content. I extract the content this way: var content = []; compiler.parser.plugin("call " + this.functionName, function (expr) { //example of extraction: content.push(this.evaluateExpression(expr.arguments[0]).string); }); And inject the new module this way: var needRebuild = true, source = ''; var buildPromise = Promise.resolve(); var listModule = new Module();

Webpack 2: Resolving via lookup chain for given paths

I'm trying to upgrade to webpack 2 and got stuck on resolving. In my webpack 1 configuration I got the case that I wanted to look up loaders in node_modules folders in several locations and their parents (basically like CommonJS resolving does). The related part of configuration was like this: // Location: /project/webpack.config.js { resolveLoaders: { root: [ '/project/sub-1/sub-1-1', '/project/sub-2' ] } } This made sure that webpack looked for the loader in (amongst others): /p

how to output independent css use webpack?

I have two entry file:pc.js and wap.js ,they require a same js (a.js); now a.js require two css file(a.css,b.css); In webpack 2 ,how to output two css file (a.css=>pc.css,b.css=>wap.css)?

Webpack config from npm script

I have two scripts in package.json setup as follows, "scripts": { "webpackDevServer": "babel-node ./node_modules/.bin/webpack-dev-server --progress --colors", "webPack": "babel-node ./node_modules/.bin/webpack" } When I execute it with > npm run webPack I get this error, basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") ^^^^^^^ SyntaxError: missing ) after argument list at Object.exports.runInThisConte

webpack loader module.exports strange behaviour

I'm writing a custom webpack loader. It's converts handlebars into handlebar templates, but I'm running into a strange issue when exporting an object instead of a function. essentially this works fine: 'module.exports = (Handlebars).template(' + source + ');' this fails: with error(The partial foo could not be compiled when running in runtime-only mode): 'module.exports.compile = (Handlebars).template(' + source + ');' How is it any different?

webpack: Critical dependency message

I'm getting this error when I load my components: ./~/@angular/core/@angular/core.es5.js 5889:15-36 Critical dependency: the request of a dependency is an expression Anyone could help out to figure out what does it mean?

Use htmlwebpackplugin.files as a JSON

I am trying to use webpack with htmlwebpackplugin. I have seen the documetation in and in the part of "Writing Your Own Templates" is said that I can use some variables in templates, like htmlWebpackPlugin.files or htmlWebpackPlugin.options. Ok. When I try to use the example of htmlWebpackPlugin.files on the template, it fails because it is not code that I have to put between <% and %>. However, I can do the same, but not using the JSON format,

webpack not creating folder/directory

Here's my webpack.config.js code module.exports = { entry: "./app/assets/scripts/App.js", output: { path: "/C/Users/noob/Documents/jay/Sites/travel-site/app/temp/scripts", filename: "App.js" } } Here's the webpack output. Problem is it's not creating scripts folder and the App.js file under temp directory Upon editing the path name to path.resolve here's the error

Webpack NetlifyCMS - Collection content not found

I'm using I created a new collection ("pages") at config.yml and .md files are located at site/content. Front-end of the site is looking fine at localhost and at Netlify. At localhost:3000/admin also displays my "Pages" and I can edit them, but when I go to I only see "Loading Entries". Here's my collection collections: # A list of collections the CMS should be able to edit - name: "pa

Webpack Normal Module Replacement for branding

I'm working on a brandable product and I have following folder structure: -> default js folder -> brands folder ----> a brand --------> js ------------> brand specific js file I want to override a brand specific Javascript file with a default file (both of files have same name - for example I have a profile.js file for each folder) while bundling is in progress on Webpack. I found a way which is Normal Module Replacement but I couldn't realize it. How can I do it? Can someone

Source maps in webpack + closure compiler

I would like to use SourceMaps generated by Closure Compiler using Webpack but I cant figure out how to do it. Here is my webpack config: const ClosureCompiler = require('google-closure-compiler-js').webpack; module.exports = { devtool: 'source-map', entry: './src/app.js', output: { path: __dirname + "/build/", filename: "bundle.js", //sourceMapFilename: "./", }, plugins: [ new ClosureCompiler({ compiler: {

Create multiple webpack bundles for different targets and have browser choose based on capabilities?

In order to support older browsers I need to import Babel's polyfill and the newer features, which result in very short code, need to be expanded into more verbose code -- resulting in bloated bundles. I would like to have Webpack output multiple bundles: Newer browsers don't need the polyfill and can use things like Promises, Arrow Functions and async / await. This means the code bundle can be smaller and load faster. Older browsers get the bundle that has more in it and loads slower. Onc

Remote-debug a VueJS webpack project

I'm using Visual Studio Code and attempting to configure the Debugger for Chrome extension to work with my webpack project created via vue-cli. I am able to attach to the correct instance of Chrome and see logged info in the Debug Console. But I am not able to add breakpoints in the scripts of my .vue files. When I click a line to add a breakpoint dot, sometimes the breakpoints are added on a line somewhere higher up in the file. And sometimes I get this error: Error processing "setBreakp

What does css-loader do in webpack?

According to the official webapck documentation, webpack imports specified CSS files into your JavaScript module using a loader called css-loader. What good does this process do? How can you just not go with the old school way of linking a CSS file to your html using the link tag?

How to define what folder webpack dev-server (hot) should watch?

I have a Node + Vue.js application, and in development environment I use webpack-dev-server for Vue.js. But I want to set the folder that webpack should watch for hot reload, because webpack is looking for all the folders and I have a folder that webpack doesn't have access, that I use as volume for postgres's docker. How can I do this?

How to "translate" <script>-s to webpack bundle?

I have a project that js files are imported using script tags. <script src="js\first.js" type="text/javascript"></script> <script src="js\second.js" type="text/javascript"></script> first.js: console.log('*******************************first'); function hello() { console.log("Hello World"); } second.js console.log('************************second'); hello(); As you can see, file second.js calls a function that lies in first.js file. I understood that if w

Webpack Compilation Cannot read property 'semaphore' of null

Trying to build my React app and I am having this compilation error: /Users/jimvercoelen/Documents/bitbucket/inboundmuse-client/node_modules/webpack/lib/Compilation.js:268 _this.semaphore.release(); TypeError: Cannot read property 'semaphore' of null at factoryCallback (/Users/jimvercoelen/Documents/bitbucket/inboundmuse-client/node_modules/webpack/lib/Compilation.js:268:12) at factory (/Users/jimvercoelen/Documents/bitbucket/inboundmuse-client/n

GatsbyJS cannot find module 'fs' webpack config issue

I'm using gatsby for a small application. So far it worked fine, but after I installed some additional npm-modules I get two errors Module not found: Error: Cannot resolve module 'fs' in... Since gatsby runs on webpack and there is no webpack.config.js-file where you might change your setup, Gatsby recommends to add a custom webpack config file. From further research it seems that adding this to the webpack config file node: { fs: "empty" } would solve the problem. So, I tried to add thsi

Webpack is not recognized

I am currently going through learning Node.js and as such I am following along a tutorial on YouTube, in this he makes use of Webpack. On the video when he types in webpack into his terminal it works correctly, however if I typed into my terminal webpack I get a message saying it is not recognized. I saw a post on here where it said the fix was setting the environment path for npm, which I did. It still wasn't working so I restarted my computer and then installed webpack again, however I still

Webpack PouchDB error is undefined

I am using PouchDB 5.6.0 to sync to a local CouchDb on my Server. It worked before, but now it doesnt work anymore to replicate the databases. The code in my bundle.js is as follows: const db = new PouchDB("actions"); const remoteDatabase = new PouchDB(url); $("#syncAgain").attr("disabled", "disabled"); console.log("disable"); yield db.sync(remoteDatabase, { timeout: 2000 }).on('change', function (info) { console.log("change"); }).on('paused', funct

Webpack How to include a generated PWA manifest into a precache-manifest rendered by Workbox

I have a Webpack config file that uses a webpack-pwa-manifest plugin ( to generate a PWA manifest file. The manifest file name is manifest.hash.json, where "hash" is a value dynamically generated on every build. I'm also using an InjectManifest plugin of Workbox ( to render a precache manifest that will then gets injected into a service worker file. Here is a "plu

VueJs + webpack Simple - build - asset files missing

I am using Vue-cli with the webpack-simple to create a small app. In the assets folder, by default is the logo.png. There I add an main.css file - and link it I the index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Lorem ipsum</title> <link rel="stylesheet" href="./src/assets/main.css"> </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> <

Webpack Dynamic Require

I have some modules named using this convention framework-{function} and I require them dynamically. init(name, options) { let plugin = require(`framework-${name}`)(this, options); this.registerPlugin(name, plugin); } Webpack generates this code when I use development mode in webpack config. It complains Cannot find module framework-db even if it does exist in my node_modules. /***/ "./node_modules/framework sync recursive ^framework\\-.*$": /*!***************************************

Webpack Does Babel Runtime Tansform provide Object, Promise and Symbol support in IE?

The following code includes dynamic import test, Object test, Symbol and Promise tests. import $ from 'jquery'; $('#TestDynamicImport-Button').on('click', () => { loadModule(); }); async function loadModule() { const MODULE = await import('./TestModules/TestJsModule'); console.log(MODULE.TEST1); } // Promise test let promise1 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, 'foo'); }); console.log('Promise Test: ' + promise1); // Symbol test let obj = {};

Webpack How do I have url-loader resolve when not in root directory

I have a project that uses a gradle task to run webpack and outputs the files into src/main/resources/static/webpack, this means when hosted the files are in https://localhost:8080/webpack. I am using url-loader to load the files but one is too big so it is outputted to the folder as well so we end up with... bundle.js [hash].png When I got to http://localhost:8080/webpack/[hash].png I see the image but I have a CSS file that references it and it says... background-image: url(17841a68afd

Error: Cannot find module 'stylelint' Webpack

I tried to include a scss linter to my webpack config file. But every time I run "npm run start" my console print this error message: Error: Cannot find module 'stylelint' The plugin is installed and my looks like this: const merge = require('webpack-merge') const webpack = require('webpack') const common = require('./webpack.config.common') const user = require('./scripts/utils/format-config')(require('./main.config.js')) var styleLintPlugin = require('stylelint-webpack

Webpack Jest coverage report unknown

I want to integrate Jest in my webpack flow, I have installed following installed following dependencies "@babel/core": "^7.1.2", "@babel/preset-env": "^7.1.0", "babel-7-jest": "^21.3.3", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^23.6.0", "babel-loader": "^8.0.4", "clean-webpack-plugin": "^0.1.19", "css-loader": "^1.0.0", "express": "^4.16.3", "extract-text-webpack-plugin": "^4.0.0-beta.0", "file-loader": "^2.0.0", "html-loader": "^0.5.5",

Controlling Webpack 3 Bundling / Chunking (in Ionic3)

I have a bunch of stuff in node_modules that, from what I can tell, all ends up in vendor.js when I build my Ionic3 project. For simplicity's sake, lets say I have the following folders in node_modules: abc, xyz, uvw, and qrs. Lets say further that abc and xyz are public libraries but uvw and qrs are private libraries. As such, I would like to end up not with a single vendor.js that includes all four libraries. Rather, I would like to end up with a vendor.js that includes abc and xyz, and a priv

How to create common chunks for a group of entry-points in webpack 4?

I have a Nextjs app that its pages are separated between 3 regions, admin area, front area, members area. I want to create a commons chunk for all the node_modules packages that are consumed by pages (they are defined as entry points in webpack) that belongs to the same area. For example this is the folder structure of the project, nextjs configuring each page to be an entry point for webpack. pages/ admin/ page-1.jsx page-2.jsx page-3.jsx page-4.jsx front/ page-a.jsx

Write MiniCssExtractPlugin in webpack-chain way

How to write the following in webpack-chain const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: '[name].css', chunkFilename: '[id].css', }), ], module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, o

Webpack After Prod build getting err You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable

I have implemented ReplaySubject in my app. It is working fine on ng serve and ng build. But after creating a build using ng build --prod, then it starts giving the error as You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. Here is my implantation import { ReplaySubject, Observable, throwError } from 'rxjs'; import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http'; import { Injectable } fr

What is different between webpack production and development regarding tree shaking

in my webpack config when mode: "development" if I use import { pick, flattenDeep, chunk, fromPairs } from 'lodash-es'; or import _ from 'lodash-es'; the bundle size is the same at about 3.27 mb. but when I set mode to production in my webpack config, I get a bundle size of 1.52mb for the first import syntax, but I get 2.5mb for the second syntax, which leads my to believe that in development the tree shaking is not occuring. I read on another stack overflow question that the lodash

Webpack config doesn't minify the scss

I try minify files css and scss. My compiling SCSS to CSS and bundled into main.css. But only file css is minified in main.css. I'm using Webpack 4.33.0 and mini-css-extract-plugin. Webpack.config.js file: No errors. Thank you. { test: /\.scss$/, use: [ { loader: MiniCssExtractPlugin.loader }, { loader: "css-loader", options:

Webpack How to inline CSS in the head tag of a NextJS project?

My NextJS project has the following Webpack configuration: import path from 'path'; import glob from 'glob'; import ExtractTextPlugin from 'extract-text-webpack-plugin'; import webpack from 'webpack'; import dotenv from 'dotenv'; import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'; import withSass from '@zeit/next-sass'; dotenv.config(); module.exports = withSass({ distDir: '.build', webpack: (config, { dev, isServer }) => { if (isServer) { return config

webpack attempting to load file from incorrect path

I am using wasm-pack-plugin in order to compile some rust code into my webpack project. I am serving my javascript from localhost:4000/js/app.js. I have the following in my app.js file. import("../../pkg").then(module => { module.run_app(); }) Unfortunately, when I attempt to run my application, it tries to load localhost:4000/ This is returning a 404. If I manually go to localhost:4000/js/ I get the file. How can I tell webpack that it should be attempting to hit /js/

Webpack CSS error source-map information is not available at URL() declaration (found orphan CR, try removeCR option)

I am having a problem when I execute NPM start in my project. I get this error message: ./src/assets/base.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/assets/base.scss) Error: resolve-url-loader: CSS error source-map information is not available at url() declaration (found orphan CR, try remove

webpack sass-loader won't resolve urls

While css files resolve just fine, in scss it simply won't resolve. Does anyone knows the solution? Sass-loader tells me to use 'resolve-url-loader', but I can't make it work. Im trying to add font-awesome. If i use the css version it works just fine (with file loader even copy fonts to dist) but with scss no. Here is my prod config file. webpack.production.js const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const Opti

Is Webpack 5 production ready?

I know that upgrading from v4 can cause issues with existing plugins and loaders but can I start using Webpack 5 in a new project in production reliably? Specifically for Module Federation to use with React.

Webpack bug - Accessing non-existent property 'cat' of module exports inside circular dependency

Only update come from github security bot PR. Package.json { "name": "visual-ts", "version": "0.3.6", "description": "Improved render options like set tiles, play sprite animation, multy resource handling, multiplayer coordinate etc.. Whole project is based fully dependency build. Main file is app.ts . Class ioc saves singlton instances also bind. In this project html and css is not priory. Based on canvas 2D. Used lib Matter.js in typ

Webpack for inline javascript functions

I have a dynamic html rendered by php server that is full of inline javascript calls like so: <button onclick="run"></button> I also have a javascript files that correspond to these functions. Example of one file content below: (...) function run() { alert("it works!"); }; (...) I would like to bundle JS files using webpack. Webpack will happily tree shake anything that it can't find references to, so function run() won't be bundled. How can I can make it so it

Errors when I use sql.js with webpack in PWA service-worker usecase

I want to use sql-wasm.js ( in PWA service-worker. The reason I want to use it is, fetching mbtiles(sqlite-based web map tiles distribution format) by service-worker, extract web map tile images from it and store them into indexed DB. So I want to use sql-wasm.js for purely read-only use case. I call sql-wasm.js from my service-worker like this: import initSqlJs from "./sql-wasm"; import "./sql-wasm.wasm"; ... initSqlJs({}).then(SQL =>

How to setup skins with TinyMCE using webpack and dev server?

I'm trying to get TinyMCE working (with Vue 2). I'm using webpack so I want to import the editor as a module (I've installed version 3 of the tinymce-vue node module, for compatibility with Vue 2.x). I've registered tinymce in my main.js like: import tinymce from 'tinymce/tinymce'; import 'tinymce/icons/default'; import 'tinymce/themes/silver'; import 'tinymce/plugins/paste'; import 'tinymce/plugins/link'; ... Vue.use(tinymce); The docs say that the editor must have a skin available to work, bu

  1    2   3   4   5   6  ... 下一页 最后一页 共 22 页