Questions tagged [webpack]
11405 questions
1
votes
0
answer
91
Views
Split main.bundle.js angular starter
I am using https://github.com/gdi2290/angular-starter for my project and I want to split main.bundle.js in multiple files with predefined names.
For example:
main.bundle.1.js
main.bundle.2.js
main.bundle.3.js
main.bundle.4.js
Is it possible to make this kind of configuration?
1
votes
0
answer
301
Views
How to bundle Create React App with webpack?
I'm bundling the react app into a single file so that it will be simpler to serve from a Scala Play backend.
my webpack.config.js looks like this
const webpack = require('webpack')
const path = require('path')
module.exports = {
entry: {
frontApp: './src/index.js'
},
output: {
path: path.join(__dir...
1
votes
0
answer
215
Views
Ngrx not working properly with AOT in Angular
From past couple of days I am trying to use ngrx with AOT, with JIT it works fine, but with AOT it gives this error Uncaught TypeError: Cannot convert undefined or null to object in combineReducers, I believe its because it's getting undefined as the first parameter, here is my code:
// reducer.ts...
1
votes
1
answer
1.1k
Views
webpack build error TypeError: Converting circular structure to JSON
I'm facing an error in building and running dev server with Webpack. I use Vue.js and used vue-cli for generating a project. For testing, I'm using Jest and npm test runs with no problems.
If I run npm run build I get this error output:
ERROR in TypeError: Converting circular structure to JSON
-...
1
votes
0
answer
206
Views
How to use an alternative promise library in VueJs project?
Device: PC
Browser: Chrome (62.0.3202.94)
OS: Ubuntu 16.04
Hey! I'm using VueJs webpack starter. I've tried many things, but nothing seems to work — browser keeps using its native promise library. Here are some things I did (tried DefinePlugin, ProvidePlugin, explicit shadowing):
webpack.base.con...
1
votes
2
answer
743
Views
Slow Karma Unit Tests
I wrote unit tests for a small reach application using Jasmine and Karma.And Karma is running slow for these tests.
This is my karma config:
var unitTestReportOutputDir = 'unit-test-report';
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
reporters: ['dots'],...
1
votes
1
answer
478
Views
Bitbucket pipelines webpack build and ftp deploy NO JS OUTPUT on the server
I have my pipelines build settings:
branches:
production:
- step:
name: Build and test JS.
image: node:8.9.3
script:
- npm install
- npm test
- npm run-script build
- step:
name: Build and test PHP.
image: php:7-fpm
script:
- echo 'Here will be the Composer build and PHPUnit tests.'
- step:
name:...
1
votes
0
answer
42
Views
webpack solve require arguments before build (constexpr)
I'm working on a RESTful API express.js server. what I expect is something like A node Express router middleware for RESTful API base on certain folder path. but this package using dynamic require which loads modules on runtime with an expression. this cause webpack throw an error: Critical dependen...
1
votes
1
answer
212
Views
React standalone bundle without react library inside
I have created standalone bundle which I include in React App. The App itself does not anything know about Extension Bundle (next XB) it load, but the XB does know about App and libraries it use inside. How to make App share library packages it compiled with to XB? I mean if the App compiled with Re...
1
votes
0
answer
731
Views
webpack devServer configuration : "‘Access-Control-Allow-Origin
Hi all i'm new in stackoverflow and Premise that i not expert in NodeJs;
below what i have done
I downloaded webix jet from https://github.com/webix-hub/jet-start
unpacked and installed webix jet in Ibm i (As400) via npm install (in Ibm i we run NodeJs V6.9.1)
As Dependencies of webix Jet, there is...
1
votes
0
answer
265
Views
Webpack “cannot find module” error, path is wrong
I am trying to publish my application and I am getting the following webpack error:
Error: Cannot find module 'C:\Users\User\source\repos\DDvwn\node_modules\webpack\bin\webpack.js'
The path it provides is wrong. The correct path to the file should be C:\Users\User\source\repos\DDvwn\DDvwn\node_modul...
1
votes
1
answer
45
Views
What does module refer to in context of the 4 concepts of Webpack?
The 4 concepts of webpack are Entry, Output, Loaders, and Plugins.
I have been looking through the documentation to get an understanding of how my React configuration works.
Entry and Output make sense. But why is loaders included under module.
In terms of the documentation modules are what webpack...
1
votes
0
answer
184
Views
why style-loader affects the actual class names applied?
I'm new to webpack configuration, and been learning the usage of loaders.
from what I understand :
css-loader reads the files and resolve imports and url's found there (and can also create css modules if set via options or change the classnames to scoped names...)
style-loader generate js that, in t...
1
votes
1
answer
49
Views
How to compile test-only code with webpack
I have a few private methods that I want to write unit tests for. However, since these are private methods, they are not exported.
This article shows how you can use grunt to wrap a code in comments and this code will be excluded from compiling if you are compiling for production.
Is there a simila...
1
votes
0
answer
274
Views
Angular: error, not installed as it should
I'm new to Angular 2 and Angular CLI environment.
I'm working on a project and when tried installing angular CLI and related stuff. It got installed but:
When ng --version is checked
Angular CLI: 1.6.1
Node: 6.12.2
OS: linux x64
Angular: error
... animations, cli, common, compiler, compiler-cli, cor...
1
votes
1
answer
256
Views
Karma-typescript Interface XXX cannot simultaneously extend types ' YYY
My tsconfig.json is
{
'compilerOptions': {
'outDir': './dist/',
'sourceMap': true,
'module': 'es6',
'target': 'es5',
'jsx': 'react',
'allowJs': true,
'preserveConstEnums': true,
'removeComments': true,
'noImplicitAny': false,
'moduleResolution': 'node',
'noUnusedParameters': true
},
'include': [
'....
1
votes
0
answer
130
Views
Node serverside rendering by parsing static bundle files
I am looking into server side rendering for a react/webpack web application. Then I was wondering.. Is it any simple way of processing the static files produced by webpack? So the server side renderer read the index.html file that contains the bundle, run the javascript in it so the react app is inj...
1
votes
0
answer
75
Views
Is Dependency Injection with AngularJS and Webpack superfluous?
I'm working on an AngularJS application and trying to convert it from a Gulp bundling system over to Webpack. I've been searching for some time now for arguments for/against utilizing the AngularJS dependency injection in tandem with require() statements for Webpack dependency graphs. Why might some...
1
votes
0
answer
79
Views
How to get the same hash output in Webpack
Is it possible to generate the exact same outputs in local and server? I am using the same Webpack version, I have removed node_modules and reinstalled all the packages with the exact same versions. But still, the outputs for both are different.
Local:
Hash: de5e3b914a5511a29229
Version: webpack 3.4...
1
votes
2
answer
1k
Views
Webpack bundled JS not being executed
This is a very strange problem because actually, some of the bundled code is being executed. I use style loader for my CSS and that of course gets put into bundle.js and loads and works fine. However, I also have a file with some code to set up the jQuery localScroll plugin, and that code isn't wo...
1
votes
0
answer
192
Views
ESLint error when importing from redux-saga
Importing redux-saga as follows:
import { takeLatest } from 'redux-saga/effects'
ESLint is raising the following error:
Error while running ESLint: Cannot find module
'/Users/cjpitt/project/node_modules/redux-saga/config/webpack.config.dev.js'
My ESLint config contains import resolvers as follows:
'...
1
votes
0
answer
145
Views
Stop webpack from compiling multiple times on single file change
I am using Vue.js Single File Components with Typescript. For CSS there is a webpack loader that generates CSS stylesheet file from .vue files.
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.vue$/,
use: [
{
loader: 'webpack-atomizer-loader'
}
]
},
{
test: /\.css?$/,
use:...
1
votes
0
answer
457
Views
how to add scss support for vuejs
I'm trying to use vue-material but in the documentation, it only says to read on Pre-Processors, I tried everything on the pre-processors page and couldn't fix my error:
The scss part is:
@import '~vue-material/components/MdAnimation/variables';
@import '~vue-material/theme/engine';
.md-layout-item...
1
votes
2
answer
2.8k
Views
What is best way to include external js files in (webpack and vue2)
I just developed the project using webpack2 and vue2. I have other external plugins which cannot be installed through npm. So my question is the best way to include these files. Here are my index.html
this is my index.html whare I include some external js files. Can we do some bundling so that we do...
1
votes
0
answer
388
Views
Set up map alias for WebPack and Jest
So I have this on my webpack.config.js
resolve : {
alias : {
Actions : path.resolve(__dirname , 'src/actions/'),
Components : path.resolve( __dirname , 'src/components/' ),
Reducers : path.resolve( __dirname , 'src/reducers/' ),
Sagas : path.resolve( __dirname , 'src/sagas/' )
}
},
All is...
1
votes
2
answer
1.9k
Views
Get Bootstrap theme into React app
I have a bootstrap theme with many CSS files. It is responsive and I want all the current styling for UI elements. However, I want to build my app out as React components only, What is the most efficient way to do this? How can I use the bootstrap theme's CSS files while recreating it in React?
1
votes
1
answer
332
Views
webpack not bundling with babel-loader and react
I am following along with a relatively older tutorial (from 2014) on RGR. I had to use an updated version of React, Webpack, and Babel so there are some differences. Everything has been working thus far except when I tried to compile JSX into webpack, it is giving me a build error.
ERROR in ./public...
1
votes
0
answer
400
Views
webpack: Module build failed: Error: Final loader didn't return a Buffer or String
In project try to use .mtl files. I add this third-party library 'three-mtl-loader' for do this. But files not resolved. Project use react.js for frontend and want to make component that will visualize 3d objects. Use for that three.js, react-three-renderer. I start with mtl loader, but will need ob...
1
votes
2
answer
459
Views
Vue.js Codes Not Work With Webpack
I'm Using Webpack And Vue.js. I have Very Simple Code Just Like This :
{{msg}}
new Vue({
el: '#msg',
data:{
msg:'Hello'
}
});
If I Use vue.js Directly at Index.html, Then My Code Work Fine But If I Import vue.js In Seprate js File Then I Got Error :
Uncaught ReferenceError: Vue is not defined
at ind...
1
votes
2
answer
56
Views
how can i avoid including repeatedly or abstract header & footer angular ui-router
var headerView = {
templateUrl: 'views/header/header.html',
controller: 'HeaderCtrl'
};
var footerView = {
templateUrl: 'views/footer/footer.html'
};
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller('MainCtrl', function($scope) {});
myApp.config(function($stateProvider, $urlRoute...
1
votes
0
answer
37
Views
How to point webpack externals to a property of a default export?
Another team at my company has a react app that is bundled by webpack as an AMD module, which exports a single object with named properties. It looks something like:
const React = require('react');
const ReactDOM = require('react-dom');
const App = require('./src/App.js');
module.exports = {
React:...
1
votes
0
answer
185
Views
CKEditor webpack loader issues
I want to use CKEditor in a AdminLTE project.
This project has a url loader in the rules:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: path.resolve(__dirname, 'node_modules/@ckeditor'),
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
this loa...
1
votes
0
answer
201
Views
How to compile CSS on Visual Studio 2017 Angular template using webpack?
Please ignore my ignorance, but I am somewhat new to programming and very new to webpack and Angular.
I have VS 2017 and I created a new project via New Project > ASP.NET Core Web App > and then selected the Angular template under .NET Core/ASP.NET Core 2.0. Webpack is already built into the project...
1
votes
0
answer
105
Views
angularjs es6 lazy loading
I have angularjs application, built with webpack.
I use ES6 modules, and import the css within each component.
Anyway, I want the CSS to be included and used only when I navigate to the component - lazy loading.
How can I do it?
1
votes
2
answer
246
Views
Issue using webpack CommonsChunkPlugin for multiple entries
entry: {
page1: '~/page1',
page2: '~/page2',
page3: '~/page3',
lib: ['date-fns', 'lodash'],
vendor: ['vue', 'vuex', 'vue-router']
},
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'lib'],
filename: '[name]-[hash].bundle.js',
}),
In the above config, I want to exclude page1 from CommonsCh...
1
votes
2
answer
654
Views
babel-preset-env and stage-0 confusing
Stages represent the status of experimental features?
what fetures are on experimental, any links/details of it?
'presets': [
[ 'env',{
'modules': false,
'targets': {
'browsers': ['last 2 versions', 'safari >= 7']
}
}
],
'stage-0',
'react'
],
'plugins': [
[ 'transform-runtime',{
'helpers': false,
'...
1
votes
0
answer
56
Views
How do I attach to window in webpack to make it available in browser
I can attach to window in my entry.ts file, but when it builds my bundle it wraps the attachment, and prevents it from attaching in the actual browser.
import 'bootstrap';
declare var $: any
declare const window: Window
( window).$ = ( window).jQuery = $;
In my entry.ts file I can access jQuery via...
1
votes
0
answer
311
Views
Uncaught ReferenceError: require is not defined, webpack error
I'm using node modules for a client application in the browser. I get
'Uncaught ReferenceError: require is not defined' when I try to require a constructor function from a neighbouring file into the app.js. app.js and Desktop.js are located in the same folder so the relative link path should be cor...
1
votes
0
answer
415
Views
Webpack - Bundle only required CSS files for production
I have a Vue app that has 3 different css themes depending on what the 'brand' is set to. Right now it is working in development. I run an npm run dev command and pass in the brand, then set the brand variable to be globally accessible, and then in my main.js file I set the required css dynamically...
1
votes
1
answer
220
Views
How to load the webpack bundles created in 'ng build --prod' in django templates?
I am using Angular 4 for client side/frontend and using django 1.11 for backend. I edited .angular-cli.json to redirect the bundles output directory to django app assets
./.angular-cli.json
{
...
'apps':[
..,
'outDir': 'django_app/assets/webpack_bundles/',
....
],
...
}
when building ng build --dev...