Just trying to make sure I am setting up my preact js correct for production.
In my webpack setup with preact, and run npm run build I notice with Bundle Analyzer Plugin the path for the preact js file is
/node_modules/preact/dist/preact.js and not
/node_modules/preact/dist/preact.min.js
I have uglify and minify js set up as well, but just thought it was curious that the minified package is not picked up ?
Entry script within webpack
entry: { app: './src/index.js', vendor: [ 'preact', 'preact-router' ] },
Npm Run build script
"build": "cross-env NODE_ENV=production webpack --progress -p --display-modules --display-chunks"
The default main for preact is dist/preact.js - preact.min.js is there for people who want to take advantage of minification when not applying their own (people hotlinking it off a CDN, for example), and to measure real-world output size.
You're already applying UglifyJS to your bundle by running webpack with the -p flag, so you needn't worry too much about trying to use dist/preact.min.js. It could save a few bytes, but nothing major. The file you're using (dist/preact.js) is actually already run through UglifyJS by Preact, it's just not compressed but not mangled (so the variable names remain intact).
Related
I've been trying to get up a react and django application. First, I had followed this set of videos here: https://www.youtube.com/watch?v=6c2NqDyxppU&list=PLzMcBGfZo4-kCLWnGmK0jUBmGLaJxvi4j&index=3. There was a bunch of commands that you can see in the description that needed to be run in as well as a lot of copy pasting configuration files.
Later, my friend told me that create-react-app existed and would set up everything needed with just one command. I tried it, and it worked really well. However, there were issues with connecting it to django. The files that came out of create-react-app were different to the ones shown in the video and when I tried searching it up, a few solutions said to use npm run build and pass the build folder into django.
Running a build takes quite a long time and it is not automatic as it was when I had the webpack and babel system. What am I supposed to do to configure create-react-app so that I can get it to update automatically and get it into django.
Some places said that I could edit the config files when I do npm run eject. There is a problem that the package.json files in the tutorial project and the create-react-app project are not the same. The thing that lets the webpack and babel project update is this snippet of code in the package.json file:
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
I ejected my create-react-app project but create-react-app doesn't use webpack so I won't be able to use this. What do I do?
When I try to run webpack-dev-server it gives the error.
Error: Cannot find module 'webpack-cli/bin/config-yargs'
I looked around and found that you had to change the script to "webpack serve" and did that but then it gives me the following:
**[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. Please strictly follow the order of the keywords in the pattern.**
My system is Windows 10 Pro and the versions are the following:
webpack: 5.6.0
webpack-cli: 4.2.0
webpack-dev-server: 3.11.0
I've also tried including "inline: false" into the devServer object in webpack.config.js but to no avail.
just few step:
add script "dev": "webpack serve"
set devtool: 'eval-source-map' in webpack.config.js
then run npm run dev or npx webpack serve
webpack v5 && webpack-cli v4 should use webpack serve instead of webpack-dev-server
if you run npx webpack serve come out
configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. Please strictly follow the order of the keywords in the pattern.**
you can set devtool: 'eval-source-map' in webpack.config.js
usually to balance speed and debugging:
in development mode we use devtool: 'eval-source-map'
in production mode we use devtool: 'cheap-module-source-map'
you can also return webpack v4 && webpack-cli v3
or try npm i webpack-dev-server#4.0.0-beta.0 -D
see https://github.com/webpack/webpack-dev-server/releases/tag/v4.0.0-beta.0
more issues you can see
https://github.com/webpack/webpack-cli/issues/1948
https://github.com/webpack/webpack-dev-server/issues/2759
Maybe someone will need to change devtool: 'cheap-module-eval-source-map' to devtool: 'eval-source-map'
I have a big project which I was trying to reduce in size using webpack-p according to here: https://hackernoon.com/reduce-webpack-bundle-size-for-production-880bb6b2c72f
I could not run it as I was encountering problems when running webpack -p (it threw an error on every function of index.js
I thought it might be something with my packages. I decided to create new create-react-app and run the command there. To my surprise, there I get the same error:
What might be the problem here?
If your app uses webpack v4 you must use webpack --mode=production instead of webpack -p.
Possible values for mode are: none, development or production.
Another usage:
// webpack.config.js
module.exports = {
...
mode: 'production',
...
}
You don't have a config file because the command you are trying to run is global, it is not getting from your current working directory. Run npm run build instead, which does that under the hood, but has a lot of other things created by the contributors of create-react-app.
You could pass a config file for the global webpack cli, but you don't have access for that in your folder since it is "not" available for your. npm run build also already applies a lot of optimizations for you.
Im tring to build my ReactApp using an environment variable system.
Following online guides, I've create two different files
.env.developtment and .env.production
using the syntax for variables:
REACT_APP_BASE_SERVER_URL=myapp/
During development (using npm start to start the server), development file is loaded perfectly and all variable are stored in process.env global.
Unfortunally after compiling it with webpack, process.env is empty.
Im compiling my code with:
./node_modules/.bin/webpack --config webpack.config.js --env.production --progress --env.NODE_ENV=production --colors
and in my webpack there is no process.env override (using DefinePlugin is the common mistake).
Following a similar question on this site, I've tried to put this command in the config to avoid any process override:
node: {process: false}
but with this process.env will be totally undefined instead of empty ( {} ).
Is it possible to use this kind of environment system or .env files are only supported with npm build?
Sending the env as an argument does not set the application environment. Said so, I considering you are doing it inside your config. What would set up few env values is the option mode as development or production, which is available on webpack4 (You do -p or -d for the previous versions).
I dont know why you said using webpack.DefinePlugin is a common mistake. I have been using it and it works very well.
In last case, if you are sure you process.env should not be empty I would suggest you to do the syntax process.env["expected_attr"].
I am doing server side rendering inside my react app. Inside of app I have a few pictures so i have loder for them inside webpack-config
{
test: /\.(gif|png|jpg)$/,
loader: 'file-loader?name=assets/img/[name].[hash].[ext]',
},
If I run my code this way
cross-env NODE_ENV=production webpack --optimize-minimize --config webpack.config.prod.js,
I get an error
Warning: Prop `src` did not match. Server: "assets/img/profilna.1b1788096b2a10afe508dff672e50072.jpg" Client: "/assets/img/profilna.1b1788096b2a10afe508dff672e50072.jpg"
but if I run it like this
cross-env NODE_ENV=production webpack --p --config webpack.config.prod.js,
everything is good and functions perfectly like I want.
Why is that?
As I read -p is equivalent of
webpack --optimize-minimize --define process.env.NODE_ENV="'production'"
Since I am already setting production enviroment I don't need --define
cross-env NODE_ENV=production
with this, you are setting Node process.env.NODE_ENV but is not "being passed" or used - while bundling - inside the app. Basically, you need to create global variables for the app and set NODE_ENV to what you need by webpack. And this is what...
--define process.env.NODE_ENV="'production'"
...does. It will use Webpack DefinePlugin to set global process.env.NODE_ENV to be used while bundling the app.
I know this sounds a little bit unclear, I struggled to understand it myself but hopefully, documentation will clear that out.
Technically, NODE_ENV is a system environment variable that Node.js
exposes into running scripts. It is used by convention to determine
dev-vs-prod behavior by server tools, build scripts, and client-side
libraries. Contrary to expectations, process.env.NODE_ENV is not set
to "production" within the build script
See "Specifying the environment" for an example.