Questions tagged [webpack-4]

7

votes
1

answer
80

Views

Webpack4: Two vendor libraries based on entry points

So, I've been hunting and I can't seem to find anything unless my searching skills have gotten worse lately. But, what I'm looking for is to be able to generate two vendor bundles based on the entry point. For example, I have 3 entry points: Editor Public Auth When a user is logged in, it'll include...
LeeR
0

votes
0

answer
9

Views

webpack 4 react build causes token error, but run start works

After a build with webpack I am getting the Uncaught SyntaxError: Unexpected token error. I am able to run start and it will load that way. So I know this must be a problem with the output, or so I would imagine. The index.html is generating properly, as is the bundle.js. I have that as a path on...
lakerskill
1

votes
1

answer
61

Views

Webpack: output.path, publicPath and chunkFilename selecting concept for projects where html and js files are not in the same folder

From the webpack documentation for output.publicPath: Simple rule: The URL of your output.path from the view of the HTML page. module.exports = { output: { path: path.resolve(__dirname, 'public/assets'), publicPath: 'https://cdn.example.com/assets/' } }; Above rule is actual for single-page ap...
Gurebu Bokofu
1

votes
3

answer
2k

Views

Can not minify the css code with webpack

Webpack version: 4.16.3 All compilation is successful. My code after compilation in bundle.css is not minify. I try to use minimize: true in text-webpack-plugin, but it not working. For compile I use command in command line: webpack in my working directory What am I doing wrong? My wepback config: '...
Alexander Loginov
0

votes
1

answer
6

Views

Babel 7 module resolver not finding modules

I am upgrading to Babel 7 in my project however my modules in .babelrcare no longer resolving. My package.json looks like this: "dependencies": { "@babel/core": "^7.0.0", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "babel-plugin-styled-components": "^1.10.0", "react": "^16.4.0", "react-dom": "...
mysterious-bob
0

votes
0

answer
4

Views

How to create chunk which contains only code from it and replaces its entry bundle in webpack 4?

I'm moving from webpack 3 to webpack 4 and have some suddenness. I want to create a chunk which contains only code from it and replaces its entry bundle. How to do it with SplitChunksPlugin? My solution with CommonsChunkPlugin in webpack3 My entry point: entry: { ..., all: './src/all.js', ..., } Cre...
Roman Domoratskii
0

votes
0

answer
3

Views

Migrating from webpack 2 to webpack 4

I'm trying to migrate a project I'm working on from webpack 2.4.1 to the most recent version 4.29.3. (A much needed upgrade, I know) I think I have converted everything correctly, from replacing extract-text-webpack-plugin to mini-css-extract-plugin, etc. The problem occured when I tried to replace...
RandomStranger
3

votes
2

answer
131

Views

Using webpack [request] magic comment is bundling together dynamic modules as one

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/home', name: 'home', component: () => import( /* webpackChunkName: "[request]" */ `@/views/Home.vue`) }, { path: '/about', name: 'about'...
Sainath S.R
0

votes
0

answer
4

Views

Bootstrap tooltip with popper not working via webpack

I'm trying to get Bootstrap 4.2.1, jQuery 3.3.1 and Popper.js 1.14.7 working via webpack 4.29.0. My main.js: import 'bootstrap/js/dist/util'; import 'bootstrap/js/dist/tooltip'; import '@fortawesome/fontawesome-free'; $(function () { $('[data-toggle="tooltip"]').tooltip() }) My webpack.config.js var...
meilon
0

votes
0

answer
2

Views

Can Webpack 4 Treeshake an Unused Function Returned from Another Function?

Please advise if I'm wrong, but I've found that webpack 4.20 cannot treeshake an unused export function if it is returned by another function. For example, lets say I have the following file named test.mjs : export const mirror = function mirror(str) { return str; }; let createCounterFunction = func...
Lonnie Best
1

votes
2

answer
814

Views

Webpack Lazy Loading with Typescript

I have a problem with lazy loading and webpack. There is a video of Sean Larkin showing how easy it is with webpack 4 to create a lazy loaded bundle (Here). But when I try to do it with typescript I run into some problems. index.ts export const someThing = something => import("./lazy/lazy"); and laz...
Michael Filler
1

votes
1

answer
748

Views

Webpack 4 + Babel leaving const in transpiled code

I'm trying to get my code working on Android 4.1 Webview, which doesn't support ES6. But I am getting this error: Uncaught SyntaxError: Use of const in strict mode. .babelrc config { "plugins": [ "lodash" ], "presets": [ "@babel/preset-react", [ "@babel/preset-env", { "targets": { "android": "4.1" }...
btx
0

votes
0

answer
4

Views

Webpack 4 multiple entry point bundling issue

Hey everyone a little confused with webpack 4's bundling and hoping to get some advice from more experienced webpack users. I have an app that I am converting from gulp to webpack. I started off bundling everything into a single file then decided that multiple entry points would make more sense. Lo...
Galactic Ranger
0

votes
0

answer
3

Views

Uncaught TypeError: Cannot assign to read only property 'background' of object '#<Object>'

my project is babel7. render() { const {elementStyle, style } = this.props; return ( {label} ) } //Object.assign(elementStyle, style) --> error. but i correct Object.assign({}, elementStyle, style) is working. and why is not working?? i debuggered this code. at first is working but when rerederin...
kekeee
0

votes
0

answer
20

Views

Webpack “Cannot find module” for “module”: “esnext”

I have a webpack project with this in my "main.ts" module: import {Elm} from "./MainModule"; it fails with: TS2307: Cannot find module './MainModule'. but when I switch my "tsconfig.json" from "module": "esnext" to "module": "commonjs", it works. However, I need "esnext" in order to have code splitt...
Birowsky
0

votes
0

answer
8

Views

two js file were injected after Create-react-app built ,but I want only One

for some reasons I can only inject one js file and one css file into my custom html file.but 2 js files and css files were injected after built. so how can I change my config to gain what I want ? any help is appreciated. and my config is what just ejected from original CRA project: module.exports =...
WEN-JY
0

votes
0

answer
5

Views

Webpack 4: Conditionally enabling PostCSS plugins

I've integrated PostCSS into Webpack, using a separate postcss.config file. I want to enable cssnano when doing production builds, and disable it for development builds. How can I do this? Here is my webpack.config.js const webpack = require('webpack'); const MiniCssExtractPlugin = require("mini-css...
PeterB
2

votes
0

answer
6

Views

Webpack 4 - typescript entry file

I am setting up my small personal project and stumbled upon an issue with typescript and react. When I use index.js as my entry point everything goes fine, but when I use the .tsx file I get following error: EntryModuleNotFoundError: Entry module not found: Error: Can't resolve './src' I could just...
Jakub Kierejsza
2

votes
1

answer
599

Views

Webpack 4, exclude 3rd party lib from minification/compression

I have the following in my config: const viewerConfigProdWeb = merge(common.commonWebConfig, { output: { path: outputPath, filename: common.bundleNameWeb }, devtool: 'source-map', mode: 'production', optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true, ugli...
Anton Pilyak
2

votes
1

answer
510

Views

How to disable loader in webpack 4

In previous versions of webpack, following configuration used to disable configured json-loader. require("!!file-loader?name=test.json!./assets/test.json"); In webpack 4, this doesn't seems to disable the default json-loader and still import json inline too. Is disabling loader still supported in we...
Umesh
2

votes
1

answer
312

Views

Webpack-dev-server does not rebuild bundle

Very strange moment. I have: webpack.hmr.config.js // webpack.hmr.config.js const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const WebpackChunkHash = require('webpack-chunk-hash'); const commonExportsObject = require('./webpack.common.config'); const...
2

votes
0

answer
202

Views

fork-ts-checker-webpack-plugin giving errors about @types and Mocha

I'm using ts-loader and fork-fs-checker-webpack-plugin in a project, and it's complaining about node_modules/@types, for example: ERROR in D:/temp/temp-vscode/temp-electron/application-volume- change/node_modules/@types/react/index.d.ts ERROR in D:/temp/temp-vscode/temp-electron/application-volum...
Farzad
2

votes
0

answer
15

Views

Webpack build task overriding optimizations

Problem: The production build task is minifying files but then overriding those with unminified files. Context: I'm using an environment variable to use different webpack config files. npm run dev uses webpack.config.dev.js and puts unminified files into /public. npm run dist uses webpack.config.pro...
nr85
2

votes
1

answer
41

Views

IIS + compression-webpack-plugin (gzip) - Loading failed for the “script” with source

I use compression-webpack-plugin for compressing my javascript files into gz format in my ASP.NET MVC 5 project. Part of my webpack.config.js with compression-webpack-plugin settings: const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { //... plugins: [ //... new Compr...
1_bug
5

votes
1

answer
373

Views

import momentjs with es6 modules and webpack Cannot assign to read only property

I did following steps npm install moment --save import moment from "moment" When i want to import momentjs i get the following error: Uncaught TypeError: Cannot assign to read only property 'clone' of object '#' (moment.js:3837 ) moment version: ^2.22.1 I use webpack 4. Trying to import like this al...
KT Works
5

votes
1

answer
1.4k

Views

Entrypoint undefined = extract-text-webpack-plugin-output-filename in webpack 4?

I extracted css using extract-text-webpack-plugin in webpack 4. The CSS is exctacted but when i run npm run build , the css is extracted but i get a message on screen saying Entrypoint undefined = extract-text-webpack-plugin-output-filename. The Entire Stack Trace is below: $ npm run build > [email protected]
James
5

votes
1

answer
88

Views

React, creating optimal production bundles with webpack

Today I dove into the internals of Webpack and I managed to use a lot of its usefull features (via Webpack loaders) such as CSS modules and the Babel transpiler. I want to use this to make a React app (without create-react-app). Here is my config file: const HtmlWebPackPlugin = require("html-webpack...
0

votes
0

answer
60

Views

Webpack generate wrong path. Some path to empty so it only loads on client-side react-loadable.json

If I bundles all the styles in to one file and splits just javascript it works just fine. Only happening this issue when I try to split css as well. I setup the lazy loading for the routes and some component that requires heavy library such as chart library. Here is what I am using css module webpac...
Seongjun Kim
5

votes
2

answer
1.7k

Views

Can I use NODE_ENV=“staging” with mode=“production” in webpack 4?

My app use NODE_ENV for deciding which api server should request to. NODE_ENV="production" => https://api.***/ NODE_ENV="staging" => https://api.staging-***/ NODE_ENV="development" => http://localhost:3000/ I want to build staging bundle with mode="production" but keep NODE_ENV="staging". I try to b...
Fumiya Karasawa
12

votes
1

answer
3k

Views

Webpack 4 universal library target

According to the Webpack 4 documentation, if I specify libraryTarget: 'umd' it should result in the following output: (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'funct...
meltedspark
11

votes
2

answer
7.9k

Views

Webpack 4 - Sourcemaps

This article webpack 4: mode and optimization seems to suggest that when mode is set to development the devtool is set to eval. I was expecting this to trigger sourcemap generation but running the webpack-4-quickstart in either development or production mode results in no sourcemaps being generated....
kimsagro
4

votes
1

answer
517

Views

Webpack 4 Split Chunks Terms

I understand the great work that was done on webpack 4. Specially on rewriting the code splitting plugin. However, and since it's still kinda new, I don't find good documentation on the new SplitChunksPlugin. I struggle on the meaning of the terms chosen. For example: chunks: there are 3 possible...
user3299310
0

votes
0

answer
3

Views

Configuring WebPack with Moment TimeZone CDN

I am using WebPack 4 to build my TypeScript applications. One of my modules uses the moment-timezone library, for example... import * as moment from 'moment-timezone'; $('#label-locale').text(moment.locale()); and this works as expected. To make better use of caching, I would like to reference momen...
Neilski
2

votes
1

answer
482

Views

how to generate dynamic import chunk name in webpack

I am dynamically calling an import statement in my typescript code, based on that webpack will create chunks like below you can see Webpack is automatically generating the file name as 1,2,3 respectively , the name is not a friendly name I have tried a way to provide the chunk name through comment ,...
Code-EZ
22

votes
5

answer
15.6k

Views

Issues with getting started with webpack 4

I am following the tutorial exactly as given here . But I am amazed that the docs seems outdated. e.g npx webpack src/index.js dist/bundle.js fails with: The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm:...
sakhunzai
23

votes
3

answer
3k

Views

How to configure webpack 4 to prevent chunks from list of entry points appearing in any other bundle?

I am working on a large project and trying to land webpack 3 -> 4 update. This app has somewhere around 1,000 entry points, and about 10 of those are considered "global" or "core" and guaranteed to be on every page. These core bundles contain a mix of vendor and non-vendor code. I need to configure...
Joe Lencioni
6

votes
3

answer
3.3k

Views

Get mode in webpack config [webpack 4]

How can I get mode in the webpack config, for instance,for pushing some plugins. package.json "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" } What I did in webpack 3 package.json "scripts": { "build": "cross-env NODE_ENV=development webpack", "prod": "cross-e...
xAoc
6

votes
1

answer
2.3k

Views

html-webpack-plugin Entrypoint undefined = index.html

I'm trying to set a webpack4 and React boilerplate, but facing issue rendering the index.html. For example, when I updated the title of the index.html and the index.html in /dist folder is not updated, and only title is rendered while nothing in index.js is rendered. Please help take a look with bel...
JK_FX
1

votes
1

answer
1.3k

Views

Is there a way to build scss files into css with webpack 4

I'm just trying out Webpack 4 and I was wondering if it had a built-in way to manage Scss files since ExtractTextPlugin doesn't work.
Pierre Smith
4

votes
1

answer
1.7k

Views

webpack 4 disable uglifyjs-webpack-plugin

I have had this problem for the last 2 days. So I decided to completely disable uglifyjs-webpack-plugin from webpack build process. I was not able to find anything on webpack 4.
yacine benzmane

View additional questions