I have two config files I'd like to compile together using webpack. I found out that if I have two config files imported as clientConfig and serverConfig, and I pass them within an array to the webpack([clientConfig, serverConfig]).run(... call, they'll get both bundled.
However I now have a dependency where the serverConfig compilation needs a files generated by the clientConfig compilation. I have set clientConfig first in the array expecting webpack to first handle clientConfig and then serverConfig, but it seems not to be happening, since serverConfig compilation complains about the missing file, even though when checking in the output folder, it exists after the error.
Is there any way to tell webpack to wait for the first compilation before starting the next one, without having to split this in two webpack().run... calls?
Thanks!
Related
The build files generated through create react app have different names(hash code) every time.
I would like to give a custom names for the generated files.
Is there any possibility to do the same?
You can change the output filename by customizing the filename property in webpack config -- refer to https://webpack.js.org/guides/caching/
The default implementation is kept like this because, because every time you build an asset, it generates a new name and browsers won't be able to serve a cached response.
If you change the name to a constant you might need to clear the browser cache manually/ disable cache to see your changes immediately. (I think...Applicable only in prod mode as dev mode makes use of Hot module replacement)
Steps to change file name in CRA.
npm run eject This will unwind the hidden configs from CRA and show some additional config folders
Move to the config folder.
Edit file webpack.config.js (Somewhere around line 172 - 180 you can see filename: section where this is defined)
Following up to my comment, if you absolutely must change Webpack configuration you can also consider libraries such as:
Craco
Rescripts
This is an XY problem; answering any part would do.
X: I want to generate multiple bundles out of a single source tree. I'm aware of webpack supporting this, but I'm afraid, I can't use it. For example, my Router gets fed by one or more maps mapping a route (string) to a page (component). I'm storing these maps in separate files and comment importing and using them out as needed (I wrote a simple script doing this for me).
Is there a better solution?
Y: So when building the admin bundle, the user pages are not reachable from the index.tsx. Nonetheless, I'm getting typescript errors for them. The same happens even when I create a new unused file containing an error.
How can I avoid compiling unused files?
I'm not posting here all my config files as I hope, there's a simple setting for this somewhere. I'll do it when needed. Alone the list makes me depressed:
.babelrc
.env
.eslintrc
.gitignore
config-overrides.js
package.json
tsconfig.json
tslint-imports.json
This is a partial answer, but hopefully it will take you in the right direction. Typescript looks at tsconfig.json. Assuming your initiation is from an npm script, you can specify which tsconfig to use with the --project flag, like tsc --project tsconfig-1.json.
In your tsconfig.json file, only include the entry file, like
include: [
"src/app/index.ts"
]
If you have something like "src/**/*", then it will process all files. But it you specify only the entry file, then it will process only the files in that import tree. The tree is defined by the import/import() statements.
For reference: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
If you want to create multiple bundles, then you'll need to run multiple npm scripts and have multiple tsconfig files or else specify the files from the command line.
I first concatenate all my js files via grunt-contrib-concat grunt task. With this one everything worked fine (no minification).
I'm trying to switch to Google's Closure Compiler so I can minify it and add source maps, to start I'm using this options: --compilation_level WHITESPACE_ONLY and --formatting=pretty_print and I'm passing files in the same order as I did before with the grunt task so i should have a first output similar to what I've got before.
NOTE: Thanks to some sublime text magic and a diff checker, I have been able to check that both of my final generated files got all the same controllers/services in the EXACT SAME order.
All my controllers weren't using the annotation syntaxe (dependencies being declared as string before controller) so i used ng-annotate and this script to solve this problem.
Now all my files are ready for minification. To be sure about that I even declared ng-strict-di on my app and temporarly switch back to the previous concatenation system. It works perfect and fails if I deliberatly put a typo in my controllers name.
So from this I thought Closure Compiler should have worked like a charm... But no, I'm facing an Unknown Provider error when angular try to inject my first service inside my app.run() function. (The .config() is executed well as I've no custom dependencies here as well as the three first dependencies of the .run(). It really is MY personnaly implemented dependencie that fail.)
Did someone already face a similar issue ? Any idea what could cause this ?
Ok... I found out that closure compiler do not import files the same way as the grunt task I used to use.
When using the notation src/js/controllers/**/*.js I excpected it to import the files directly inside my controller folder but it didn't.
I was sure to have checked this but I certainly made a mistake and compare the old file with the old file instead of the new one; that's why I thought I got all my dependencies in the file and in same order when checking...
I have a large AngularJS app which I am in the process of upgrading (with NgUpgrade, webpack etc.) To start with, my new Angular (4) components are .ts files but my old AngularJS parts are .js files, transpiled using the Babel loader for webpack.
I would like to migrate all .js files to .ts files so that I can have everything go through the TypeScript compiler and no longer require Babel etc.
For the most part, the app runs fine (with a few small tweaks) by just renaming the files from .js to .ts and adding an import for angular at the top:
import * as angular from 'angular';
However, when I run my app, I now see a warning:
WARNING: Tried to load angular more than once.
This makes sense because Angular would be loaded once by the global script include, and once by the module import.
I can't avoid having the global script include, because I am using other scripts that require the angular global variable to be present.
As such, I think I should be using the global variable, but need to declare it to keep the TypeScript compiler happy (as per NgUpgrade documentation). I have tried changing the top of each file to:
declare var angular: angular.IAngularStatic;
This doesn't work and I get an error like the following:
TS2503: Cannot find namespace 'angular'.
Can anyone please tell me what is going wrong? I have installed #types/angular with npm/yarn and do not have typeRoots or types in my tsconfig.json file. My understanding is that this should automatically find the declarations in node_modules/#types but this doesn't seem to be the case?
I've found a solution which is working nicely (thanks to https://stackoverflow.com/a/42035067/1145963).
Added a .d.ts file at the root of my project:
declare global {
const angular: ng.IAngularStatic;
}
export {};
This allows me to use the angular global from anywhere, without needing any import or declare statements at the top of the files and without needing to do any special Webpack configuration.
I've installed karma. I've created a karma.conf.js file and pointed to my source files. In my source files is included a version of require.js.
Everything seems fine (it launches the node server, and Webstorm CLI connects to it properly) except it barfs when loading backbone style files that begin with define(... In my output I get
Uncaught ReferenceError: define is not defined
at http://localhost:9876/base/src/main/app/App.js?f2880b74f1e96a210ff36e8394daa946c9d11294:1
When I jump to code, the line indicated is just define( at the top of a backbone js file.
I've tried explicitly including require in my lib directory (which should have already been included from the wildcard)
Do I need some boilerplate somewhere to not muddle (possibly conflicting) require.js's? I tried ignoring require... but the result was the same.
exclude: [
'**/*.scss',
'**/*.css',
'**/Gruntfile.js',
'**/docs/*.js',
'**/main/resources/js/lib/crypto-js-3.1.2/*.js',
'**/main/resources/js/lib/require-2.1.2.min.js' // same error when ignored
],
Only mildly related: I'm running karma from webstorm.
I believe you have to include 'requirejs' in your frameworks. Make sure you include the requirejs string before others, ie:
frameworks: ['requirejs','jasmine']