How to make Webpack splitChunks work with Webpack-dev-server? - webpack-dev-server

I am trying to use splitChunks in Webpack 4, expecting to bundle the modules in node_modules into one bundle that won't be re-compiled each time I make a change to my code.
I added this code in my webpack.config.js:
optimization: {
splitChunks: {
chunks: 'all'
}
},
And I added this line in my index.html:
<script src="./vendors~app.js"></script>
The file 'vendor~app.js' being the new bundle generated.
When I run the webpack-dev-server the first time, it says:
Built at: 2018-09-13 13:32:47
Asset Size Chunks Chunk Names
app.js 3.15 KiB 0 [emitted] app
vendors~app.js 1.91 MiB 1 [emitted] [big] vendors~app
app.js.map 13.7 KiB 0 [emitted] app
vendors~app.js.map 3.98 MiB 1 [emitted] vendors~app
When I make a change to my source code and save, the webpack-dev-server starts compiling as expected and says:
Built at: 2018-09-13 13:33:46
Asset Size Chunks Chunk Names
app.js 3.16 KiB 0 [emitted] app
vendors~app.js 1.91 MiB 1 [emitted] [big] vendors~app
app.js.map 13.7 KiB 0 [emitted] app
vendors~app.js.map 3.98 MiB 1 [emitted] vendors~app
I was expecting the compiler not to re-compile vendors~app.js!
I thought that was the point of using splitChunks? Am I wrong? how can I avoid the compiler to re-compile vendors~app.js?
Thank you very much.

Related

testcafe compilation failure due to `import type` - requires update to Typescript version 3.8

TLDR:
The version of TS that gets installed with testcafe is version 3.5.3. However, in order to use import Type syntax, which is used by various libraries, such as jest/create-react-app, etc, we need to be on TS version 3.8 at minimum.
When I try to run a TS file with testcafe, the error I get is the following:
$ ./scripts/test_smoke.sh --debug-on-fail test.ts
Hash: 43a08709b49b552d25bc
Version: webpack 4.41.5
Time: 2113ms
Built at: 09/07/2020 1:26:25 PM
Asset Size Chunks Chunk Names
index.js 1.92 MiB main [emitted] main
Entrypoint main = index.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./test/smoke/polly/index.js] 3.79 KiB {main} [built]
+ 4 hidden modules
ERROR Cannot prepare tests due to an error.
Error: TypeScript compilation failed.
/Users/jonathan/web/node_modules/#testing-library/dom/node_modules/pretty-format/build/index.d.ts (7, 13): '=' expected.
/Users/jonathan/web/node_modules/#testing-library/dom/node_modules/pretty-format/build/index.d.ts (7, 18): ';' expected.
/Users/jonathan/web/node_modules/#testing-library/dom/node_modules/pretty-format/build/index.d.ts (7, 31): ';' expected.
All of these *.d.ts use the import Type syntax.

How much does minifying reduce file size?

In a React app, is it possible to find out how much Webpack's minification reduces the project's size excluding all the dependencies and packages not written by the project's developer?
My build/static/ directory is currently bigger than my src directory and I believe it is because code from the dependencies is also minified with the files of interest. Where could I find something to approximately compare my src directory size to?
I built the project with npm run build to find out how large the output is with minimization enabled.
Then I edited node_modules/react-scripts/config/webpack.config.js and changed line 189 (the line with the minimize property) from:
...
optimization: {
minimize: isEnvProduction,
minimizer: [
...
to:
...
optimization: {
minimize: false,
minimizer: [
...
to disable minimization.
Then built the project again to find out its size without minimization.
You can compare the built file sizes manually to find out their difference, but you will also get a nice output to the terminal when building the second time:
File sizes after gzip:
613.36 KB (+504.48 KB) build\static\js\2.0ddf8239.chunk.js
60.24 KB (+20.01 KB) build\static\js\main.8e9dd59c.chunk.js
4.73 KB (+457 B) build\static\css\main.aaaa4d7d.chunk.css
1.66 KB (+933 B) build\static\js\runtime~main.7f8cc4df.js
Notice the differences stated in parantheses.

Angular CLI build file size output shown not matching with actual on disk

I am using Angular CLI (1.2.6) and Angular(4.3.2) and running following command
ng serve --aot --prod --proxy-config config/proxy.config.json
Or
ng build --aot --prod --proxy-config config/proxy.config.json
If you see below output vendor..bundle.js** showing 4.59 MB But if I open dist folder and check, its showing me 1.47 MB on disk.
So likewise for
vendor.**.bundle.js - showing(4.59 MB), on disk (1.47 MB)
main.**.bundle.js - showing(1.89MB), on disk (870KB)
So want to know, why this has difference ?
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
Hash: c030f10843de67c2fe52
Time: 145608ms
chunk {0} polyfills.cf0c1911723ba2bc9e0d.bundle.js (polyfills) 253 kB {4} [initial] [rendered]
chunk {1} main.56a2048fe2f1df9b3bfb.bundle.js (main) 1.89 MB {3} [initial] [rendered]
chunk {2} styles.dcf18dcb7e819103f605.bundle.css (styles) 228 bytes {4} [initial] [rendered]
chunk {3} vendor.ae04ef2adeac9f77347c.bundle.js (vendor) 4.59 MB [initial] [rendered]
chunk {4} inline.7a0ff2515f1bf65b1641.bundle.js (inline) 0 bytes [entry] [rendered]
The asset size fix was made and is part of release 1.3.0 (currently RC)
Look for this here which will link to this commit
#angular/cli: rewrite stats output to properly show the asset size

Webpack-dev-server fails to compile the same source as Webpack

I'm trying to configure webpack-dev-server, but keep getting the error
webpack: Failed to compile.
What's strange is that I can successfully compile with just webpack. Here's the output from both:
Webpack-dev-server
> app-react#1.0.0 web-dev E:\App.React
> cross-env NODE_ENV=development webpack-dev-server --progress --colors
[17:42:21] developer mode: enabled
[17:42:21] Beta release: false
10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from / 10% building modules 4/7 modules 3 active ...eact\node_modules\strip-ansi\index.js
[at-loader] Using typescript#2.4.1 from typescript and "tsconfig.json" from E:\App.React/tsconfig.json.
94% asset optimization
[at-loader] Checking started in a separate process...
[at-loader] Checking finished with 3 errors Hash: a94bf08b4d38bcd62009
Version: webpack 2.2.1
Time: 5372ms
Asset Size Chunks Chunk Names
bundle.js 1.71 MB 0 [emitted] [big] main
bundle.js.map 2.09 MB 0 [emitted] main
chunk {0} bundle.js, bundle.js.map (main) 1.67 MB [entry] [rendered]
[223] ./~/reactxp/index.js 146 bytes {0} [built]
[239] ./src/ts/index.tsx 248 bytes {0} [built]
[240] (webpack)-dev-server/client?http://localhost:8080 5.59 kB {0} [built]
[241] ./~/ansi-html/index.js 4.26 kB {0} [built]
[242] ./~/ansi-regex/index.js 135 bytes {0} [built]
[243] ./src/ts/arena/TempTDP.tsx 2.6 kB {0} [built]
[244] ./src/ts/platform/web/PlatformModules.ts 414 bytes {0} [built]
[262] ./~/html-entities/index.js 231 bytes {0} [built]
[564] ./~/strip-ansi/index.js 161 bytes {0} [built]
[566] ./~/url/url.js 23.3 kB {0} [built]
[567] ./~/url/util.js 314 bytes {0} [built]
[571] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
[572] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[574] (webpack)/hot/emitter.js 77 bytes {0} [built]
[575] multi (webpack)-dev-server/client?http://localhost:8080 ./src/ts/index.tsx 40 bytes {0} [built]
+ 561 hidden modules
ERROR in [at-loader] ./src/ts/index.tsx:5:30
TS2322: Type '{}' is not assignable to type 'null'.
ERROR in [at-loader] ./src/ts/platform/native-common/NativeLogger.ts:1:31
TS7016: Could not find a declaration file for module 'react-native'. 'E:/App.React/node_modules/react-native/Libraries/react-native/react-native.js' implicitly has an 'any' type.
Try `npm install #types/react-native` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native';`
ERROR in [at-loader] ./src/typings/react.d.ts:112:11
TS2559: Type 'Component<P, S>' has no properties in common with type 'ComponentLifecycle<P, S>'.
webpack: Failed to compile.
Webpack
> app-react#1.0.0 web-watch E:\App.React
> cross-env NODE_ENV=development webpack --progress --colors --watch
[17:46:04] developer mode: enabled
[17:46:04] Beta release: false
0% compiling
Webpack is watching the files…
10% building modules 0/1 modules 1 active ....js!E:\App.React\src\ts\index.tsx
[at-loader] Using typescript#2.4.1 from typescript and "tsconfig.json" from E:\App.React/tsconfig.json.
94% asset optimization
[at-loader] Checking started in a separate process...
[at-loader] Checking finished with 3 errors Hash: c0ddf8dd298d85956a54
Version: webpack 2.2.1
Time: 4495ms
Asset Size Chunks Chunk Names
bundle.js 1.41 MB 0 [emitted] [big] main
bundle.js.map 1.73 MB 0 [emitted] main
[3] ./~/reactxp/dist/common/Interfaces.js 9.04 kB {0} [built]
[5] ./~/react/react.js 56 bytes {0} [built]
[13] ./~/reactxp/dist/common/Types.js 8.78 kB {0} [built]
[14] ./~/reactxp/dist/web/Styles.js 15.3 kB {0} [built]
[119] ./~/reactxp/dist/web/ViewBase.js 8.94 kB {0} [built]
[121] ./~/reactxp/index.js 146 bytes {0} [built]
[198] ./~/reactxp/dist/web/Accessibility.js 1.07 kB {0} [built]
[199] ./~/reactxp/dist/web/Image.js 14.1 kB {0} [built]
[202] ./~/reactxp/dist/web/Text.js 4.71 kB {0} [built]
[203] ./~/reactxp/dist/web/TextInput.js 8.3 kB {0} [built]
[207] ./src/ts/arena/TempTDP.tsx 2.6 kB {0} [built]
[208] ./src/ts/platform/web/PlatformModules.ts 414 bytes {0} [built]
[209] ./src/ts/platform/web/WebLogger.ts 600 bytes {0} [built]
[478] ./~/reactxp/dist/web/ReactXP.js 5.47 kB {0} [built]
[494] ./src/ts/index.tsx 248 bytes {0} [built]
+ 480 hidden modules
ERROR in [at-loader] ./src/ts/index.tsx:5:30
TS2322: Type '{}' is not assignable to type 'null'.
ERROR in [at-loader] ./src/ts/platform/native-common/NativeLogger.ts:1:31
TS7016: Could not find a declaration file for module 'react-native'. 'E:/App.React/node_modules/react-native/Libraries/react-native/react-native.js' implicitly has an 'any' type.
Try `npm install #types/react-native` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native';`
ERROR in [at-loader] ./src/typings/react.d.ts:112:11
TS2559: Type 'Component<P, S>' has no properties in common with type 'ComponentLifecycle<P, S>'.
I'm using webpack#2.2.1 and webpack-dev-server#2.5.1. I have tried other versions but still get the same problem.
Would those errors cause webpack-dev-server to fail, but not webpack?
Here's my webpack.config.js:
const webpackConfig: webpack.Configuration = {
entry: "./src/ts/index.tsx",
output: {
path: __dirname + "/build/web",
filename: "bundle.js"
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
alias: {
PlatformModules: path.resolve(
__dirname,
"src/ts/platform/web/PlatformModules"
)
}
},
module: {
loaders: isDev
? [{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }]
: [
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
{
test: /\.tsx?$/,
loader: "webpack-unassert-loader",
enforce: "post"
}
]
}
};
export default webpackConfig;
I also can't seem to find any info online on how to debug these types of issues. Is there no --verbose equivalent?
From your webpack log:
ERROR in [at-loader] ./src/ts/index.tsx:5:30
TS2322: Type '{}' is not assignable to type 'null'.
ERROR in [at-loader] ./src/ts/platform/native-common/NativeLogger.ts:1:31
TS7016: Could not find a declaration file for module 'react-native'. 'E:/App.React/node_modules/react-native/Libraries/react-native/react-native.js' implicitly has an 'any' type.
Try `npm install #types/react-native` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native';`
ERROR in [at-loader] ./src/typings/react.d.ts:112:11
TS2559: Type 'Component<P, S>' has no properties in common with type 'ComponentLifecycle<P, S>'.
You can see that webpack is failing too. Fix these errors and both (webpack and webpack-dev-server) will work.

ERROR in undefined is not iterable! # multi main

After updating some of the packages, my compilation fails. And the error doesn't seems to be very helpful.
I have no clues where the error is. Already tried removing a lot of things, and the errors persists.
I've pushed the project with the issue here: https://github.com/KadoBOT/reaxor/tree/need-validation
The error appears in two places, in the first line after I npm start and in the last line after the bundle finishes
(...)
[0] multi main 64 bytes {0} [built] [1 error]
[1] (webpack)-dev-server/client?http://localhost:3000 2.67 kB {0} [built]
[2] ./~/url/url.js 22.3 kB {0} [built]
(...)
And:
(...)
ERROR in undefined is not iterable!
# multi main
webpack: bundle is now VALID.
Anyone experienced the same problem after upgrading packages? How do I solve this, since there is no hint, where the issue is?
Just saw this tweet from babel: https://twitter.com/babeljs/status/727301512041512961
Might help you with your problem? I have a team member running into the same issue just now and we are trying that out...

Resources