Why does Webpack with Vue.js produce such a large build file? - javascript

I've cloned this repository:
https://github.com/Microsoft/TypeScript-Vue-Starter
I run npm scripts:
npm install
npm run build
The result: build.js filzesize is about 1MB.
For a simple example, why is build.js so much bigger than the Vue.js library?

Notice that Webpack 2 is installed in package.json.
You will have to optimize the bundle yourself through the webpack.config.js and manage environment variables to reduce the bundle size.
Alternatively, you can install Webpack 4 instead and change the build script to:
"build": "webpack --mode production"
Webpack will take care of optimizing the bundle with sensible defaults.
Reference

Related

Is there a method to separate dependencies object from package.json file of an angular project?

Here is the scenario
I have multiple angular applications which belong to the same project. When I needed to upgrade an npm package, I need to change all the package.json files in each application. I tried mono repo, but it does not apply to my project because npm scripts are not the same as all apps.
So I want to separate the node dependencies from applications and keep npm scripts of the package.json files.
Is there a way to separate only the dependencies object from the package.json file? OR any other suggestions?
If I understood well this could not be done with npm but seems like it can be achieved with yarn workspaces:
https://classic.yarnpkg.com/en/docs/workspaces/
Guide for installing yarn:
https://classic.yarnpkg.com/en/docs/install/
Unfortunately npm do not support package.json inheritance. See this link.
On the other side why don't you customize your npm scripts? create alias for every npm command.
e.g.
"test-app1": "ng test app1",
"test-app2": "ng test app2 --code-coverage --no-watch --no-progress --browsers ChromeHeadlessNoSandbox",

Difference between npm run dev and parcel index.html

I can use parcel index.html to create a local development server, bundling and hot module replacement. But it have come to my attention that using npm run dev does kind of the same think, so my question is:
what is the difference between the two? and how npm run dev is making the bundling process?
NPM vs Parcel isn't a valid comparison. They are two separate things. You can use Parcel with both NPM and Yarn.
Parcel is a web application bundler that is comparable to Webpack
NPM is a package management system for node.
npm run * is a command that will execute any npm script specified within your package.json and has no exclusivity to Parcel. You can of course make an npm script that will execute Parcel commands.
If you go into your package.json file, you will see a scripts property. Within this object, you can define arbitrary scripts to run. There are reserved script names such as start, install, build among others, but for the most part, this is a "free-for-all" that enabled the developer to specify any arbitrary scripts to run. A few common scripts that you'll typically see scripts to bundle your project or run a linter.
Example of package.json
Webpack Example:
{
"scripts": {
"build": "webpack --config <your entry file>"
}
}
Parcel Example:
{
"scripts": {
"build": "parcel build <your entry file>"
}
}

What is npm run build command and how webpack is used in creating bundle file

What's the difference between npm run build and npm install webpack?
In what ways these commands differ
webpack is a module bundler for javascript application. In order to run webpack ypu need to get the webapck in your project.npm install webpack will install webpack from node module software library using npm install webpack command.
npm run build is a separate command to build the code. If you open package.json inside scripts you may see a key like build example
scripts:{
build:someValue
}

How to Share Build Scripts In Lerna Packages

I have a lerna repo that contains multiple packages organised in the usual structure:
package.json
/packages
- alpha
package.json
- bravo
package.json
- charlie
package.json
I need to transpile all packages, and I currently have the following scripts in each package's package.json:
"build": "npm run build:noWatch -- --watch --verbose",
"build:noWatch": "babel src --out-dir lib --root-mode upward --ignore '**/*.test.js','**/__tests__'",
"prebuild": "rimraf lib/*"
I currently run a build using:
lerna run build --stream --parallel
However I don't want to duplicate these scripts for every package. I would like to define the scripts in a single place, but use them from all packages. I currently have linting scripts and testing scripts in my root package which make sense there as they are effectively traversing the whole monorepo looking for tests, or files to lint. It doesn't seeem to make sense to move the build scripts up there as well as they are scoped to the individual packages, and I like the fact that I get different colour output for each package when I use lerna run.
An unsatisfying solution is to create some shell scripts in the root of the monorepo and call them from the packages' package.json files:
In root/packages/example/package.json:
"scripts": {
"build": "../../scripts/build.sh",
"build:noWatch": "../../scripts/build.sh",
"prebuild": "../../scripts/prebuild.sh"
},
Then in root/scripts/build.sh:
#!/bin/sh
babel src --out-dir lib --root-mode upward --ignore '**/*.test.js','**/__tests__' --watch --verbose
Whilst this works, it doesn't feel right: it still involves duplication between the packages and requires setting permissions on the shell scripts (which complicates CI).
Is there a better way to share these commands amongst all my packages?
Package all the build scripts into their own module and then use lerna --hoist to host the common module so it is installed once but available to all the other packages.

How webpack.config.js work in react project?

I saw react + express project code here, start project just using this codes.
rm -rf build public/bundle.js
./node_modules/.bin/babel server --out-dir build
./node_modules/.bin/webpack --progress
node ./build/main.js"
But I can't find how to read/execute webpack.config.js command. Who read this code? and how it works?
Webpack reads webpack.config.js by default, unless you explicitly tell it to read another config file by using the --config argument, e.g.:
webpack --config another.config.js
In your case, this command reads the webpack.config.js:
./node_modules/.bin/webpack --progress
You don't execute webpack.config.js. It is a configuration file that webpack will refer to and use when webpack is run. See this page for more info.
The build and start scripts in the package.json file for the project you linked to both run webpack. Webpack will then create a bundle.js file according to the information in webpack.config.js.

Categories

Resources