I have a react project contains two modules with 2 entry points. I have configured the web pack in a way to create two bundles (js) in the output folder like below.
dist
- Project Output 1
- index.js
- index.html
_ manifest.json
- Project Output 1
- index.js
- index.html
- manifest.json
I had created separate index.html for each bundles using chunks. Similarly, I need to create seperate manifest file for each bundle. Need help on doing that. So far I have tried filter and map in the manifest plugin but both generated manifest file contains information of both bundles.
Both manifest.json of project bundle 1 and 2 contain the same information like below.
{
//What is not intended
"path1/index.js": "path1/index.1234567890.js",
"path2/index.js": "path2/index.1234567890.js",
}
But what i wanted is each manifest file contain information about that bundle alone like below.
manifest.json - Project bundle 1
{
"path1/index.js": "path1/index.1234567890.js",
}
manifest.json - Project bundle 2
{
"path2/index.js": "path2/index.1234567890.js",
}
My web pack config looks like below.
const config = {
entry: {
ProjectOutput1: PATH1/index.jsx,
ProjectOutput2: PATH2/index.jsx,
},
output: {
filename: '[name]/index.js'
},
plugins: [
new ManifestPlugin(
fileName: 'path1/manifest.json'
),
new ManifestPlugin(
fileName: 'path2/manifest.json'
)]
};
Related
In CRA (with react-app-rewired, webpack 4), we have JSON files with configuration of application:
src/config.json -
{"settings": true}
This file is used by function to take values:
import config from './config.json';
getConfig('settings')
When building, this config is stored in main.bundle.js. This is bad, as our customers may want to modify it. How to build it as separate file?
I saw this rule but it is only for Webpack 5:
{
test: /\.config.json$/i,
type: "asset/resource",
generator: {
filename: "configs/[name][ext]",
},
},
I thought to store this json in deploy/ folder, but out of src/ imports are not allowed.
If I run npm run build with SvelteKit it seems to include all files from the src folder. Is it possible to exclude a certain file type (eg. *test.js)?
Example
Select demo app with npm init svelte#next my-app
Add the following code to src/routes/todos/foo.test.js
describe('foo', () => {
it('temp', () => {
expect(true).toBe(false)
})
})
npm run build
npm run preview
Result: describe is not defined
Workaround
Move tests outside of src
UPDATE: SvelteKit 1.0.0-beta now requires pages/endpoints to follow a specific naming pattern, so explicit file exclusion should no longer be needed.
SvelteKit specially handles files in the routes/ directory with the following filenames (note the leading + in each filename):
+page.svelte
+page.js
+page.server.js
+error.js
+layout.svelte
+layout.js
+layout.server.js
+server.js
All other files are ignored and can be colocated in the routes/ directory.
If, for some reason, you need to have a file that has a special name shown above, it's currently not possible to exclude that file from special processing.
Original outdated answer:
SvelteKit 1.0.0-beta supports a routes configuration that enables file exclusion from the src/routes directory. The config value is a function that receives a file path as an argument, and returns true to use the file as a route.
For example, the following routes config excludes *.test.js files from routes:
// sveltekit.config.js
⋮
const config = {
kit: {
⋮
routes: filepath => {
return ![
// exclude *test.js files
/\.test\.js$/,
// original default config
/(?:(?:^_|\/_)|(?:^\.|\/\.)(?!well-known))/,
].some(regex => regex.test(filepath))
},
},
}
demo
Im wondering if there is a way to completely flatten the folder structure within the build directory of a create-react-app. Im attempting to do a quick port over of my app onto a sharepoint site but the sharepoint site does not play well with the static/ folder and its children folders such as css/, js/, and media/ is there a way to do a npm run build such that the paths created are all within the same folder?
for example the asset-manifest.json currently shows files like this
{
"files": {
"main.css": "./static/css/main.ad49c970.chunk.css",
"main.js": "./static/js/main.bfd3a96b.chunk.js",
"main.js.map": "./static/js/main.bfd3a96b.chunk.js.map",
"runtime-main.js": "./static/js/runtime-main.c0915b68.js",
"runtime-main.js.map": "./static/js/runtime-main.c0915b68.js.map",
"static/css/2.d9ad5f5c.chunk.css": "./static/css/2.d9ad5f5c.chunk.css",
"static/js/2.3c65d00b.chunk.js": "./static/js/2.3c65d00b.chunk.js",
"static/js/2.3c65d00b.chunk.js.map": "./static/js/2.3c65d00b.chunk.js.map",
"index.html": "./index.html",
"precache-manifest.8fc2b5edb6f6029051530a49398ae5c2.js": "./precache-manifest.8fc2b5edb6f6029051530a49398ae5c2.js",
"service-worker.js": "./service-worker.js",
"static/css/2.d9ad5f5c.chunk.css.map": "./static/css/2.d9ad5f5c.chunk.css.map",
"static/css/main.ad49c970.chunk.css.map": "./static/css/main.ad49c970.chunk.css.map",
"static/js/2.3c65d00b.chunk.js.LICENSE.txt": "./static/js/2.3c65d00b.chunk.js.LICENSE.txt",
"static/media/logo.svg": "./static/media/logo.5d5d9eef.svg"
},
"entrypoints": [
"static/js/runtime-main.c0915b68.js",
"static/css/2.d9ad5f5c.chunk.css",
"static/js/2.3c65d00b.chunk.js",
"static/css/main.ad49c970.chunk.css",
"static/js/main.bfd3a96b.chunk.js"
]
}
Ideally I just want everything under the root/ folder without static/js/ etc.
I tried with following explanation in vue 2.5 it does not work. But in version vue 2.4.2 working fine.
"Real" Static Assets
In comparison, files in static/ are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename. You must reference these files using absolute paths, which is determined by joining build.assetsPublicPath and build.assetsSubDirectory in config.js.
As an example, with the following default values:
// config/index.js
module.exports = {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
}
Any file placed in static/ should be referenced using the absolute URL /static/[filename]. If you change assetSubDirectory to assets, then these URLs will need to be changed to /assets/[filename].
Any suggestion for vue 2.5.2 ?
Following one of the chapters of "Developing Backbone.js Apllication" by Addy Osmani (O'Reilly) about Grunt-BBB (Backbone Boilerplate Buddy), I just couldn't manage to create a build profile.
Here is the filesystem tree used for this :
/builds
/closure
/rhino
/config
/build.js
build.sh
/development
/* Grunt-BBB files after init */
/app
/styles
index.css
app.js
config.js
main.js
router.js
/test
/* Not important files used for testing */
/vendor
/h5bp
/css
main.css
normalize.css
/jam
/backbone
backbone.js
package.json
/bakbone.layoutmanager
bakbone.layoutmanager.js
package.json
/jquery
jquery.js
package.json
/lodash
lodash.js
lodash.min.js
lodash.underscore.min.js
package.json
require.config.js
require.js
/js
/libs
almond.js
require.js
/distribution
/* Empty dist directory where the optimized / minified / concatenated files should go */
Here are the steps I followed in the /development directory :
1) Install Grunt-BBB (npm install -g bbb)
2) Download r.js, a part of the Require.js project (git clone https://github.com/backbone-boilerplate/grunt-bbb)
3) Initialize the files of the boilerplate (bbb init)
Here is the build.js file I used to configure the r.js AMD loader for the Google Closure compiler :
({
appDir: '../../development',
baseUrl: 'app',
dir: '../../distribution',
optimize: 'closure', // 'uglify2'
paths: {
backbone: '../vendor/jam/backbone/backbone',
'backbone.layoutmanager': '../vendor/jam/backbone.layoutmanager/backbone.layoutmanager',
jquery: '../vendor/jam/jquery/jquery',
lodash: '../vendor/jam/lodash/backbone.min'
},
modules: [
{
name: 'main'
}
],
onBuildRead: function(moduleNames, path, contents) {
return contents;
//return contents.replace(/console\.log\(([^\)]+)\);/g, '')
// .replace(/debugger;/, '');
}
})
and this is the build.sh file I use :
#!/usr/bin/env bash
# r.js directory
RJSDIR="r.js"
RJS="$RJSDIR/dist/r.js"
# Rhino directory
RHINODIR="rhino"
RHINO="$RHINODIR/js.jar"
# Google Closure Compiler directory
CLOSUREDIR="closure"
CLOSURE="$CLOSUREDIR/compiler.jar"
# Build config directory
CONFIGDIR="config"
CONFIG="$CONFIGDIR/build.js"
# Launch compillation
java -Xms256m -Xmx256m -classpath "$RHINO":"$CLOSURE" org.mozilla.javascript.tools.shell.Main "$RJS" -o "$CONFIG" $#
My goal is to optimize, minify, concatenate all the JavaScrit file including the libraries and templates (which I don't have yet, I am only using the boilerplate files) but also CSS files.
The result I get by running ./build.sh is that every files are correctly minimised (besides CSS rule inlining, but that is besides the point) and concatenated but resources that are loaded and managed by the Jam (package manager that combines NPM and Require.js) aren't concatenated.
The reason for that since they are already loaded / managed by Jam, they are not redeclared in the JavaScript files AMD style.
In conclusion, my questions are the following :
How can I rewrite my build.js configuration file so that resources that are loaded by Jam also get included and concatenated in the release / dist file ?
How can I make it so that the concatenated resources aren't copied in the realse / dist directory ? Is it possible to configure this in the build.js file or should this go in my build.sh file ?
Edit : New build.js file :
({
appDir: '../../development',
baseUrl: 'app',
dir: '../../distribution',
optimize: 'closure', // 'uglify2'
paths: {
requirejs : '../vendor/jam/require',
backbone: '../vendor/jam/backbone/backbone',
'backbone.layoutmanager': '../vendor/jam/backbone.layoutmanager/backbone.layoutmanager',
jquery: '../vendor/jam/jquery/jquery',
lodash: '../vendor/jam/lodash/backbone.min'
},
name: 'main',
include: ['requirejs'],
onBuildRead: function(moduleNames, path, contents) {
return contents;
//return contents.replace(/console\.log\(([^\)]+)\);/g, '')
// .replace(/debugger;/, '');
}
})
And here is the error :
file:///vendor/js/libs/require.jsFailed to load resource: The requested URL was not found on this server.
file:///app/styles/index.cssFailed to load resource: The requested URL was not found on this server.
require.js is never included by r.js unless you instruct it to do so. See this link:
http://requirejs.org/docs/optimization.html#onejs
The link refers to command-line options, but the build file options are broadly the same:
you need to define a dummy module for require.js in your paths:
paths: {
requireLib : '/path/to/require.js'
backbone: '../vendor/jam/backbone/backbone',
'backbone.layoutmanager': '../vendor/jam/backbone.layoutmanager/backbone.layoutmanager',
jquery: '../vendor/jam/jquery/jquery',
lodash: '../vendor/jam/lodash/backbone.min'
},
and include it:
name "main",
include: ["requireLib"],
You can ensure that allnested dependencies are resolved by setting:
findNestedDependencies: true,
You can configure an output path using 'out' in your build file
out: "path/to/my/builtfile-1.0.0.js",
Sorry I don't know enough about jam to say whether jam would override this setting
_Pez