This article is part of a two part series on how to configure a React app from scratch with Webpack and Babel and eventually add TypeScript to it. ...
For further actions, you may consider blocking this person and/or reporting abuse
In latest webpack, it should be devServer -> static instead of devServer -> contentBase. Otherwise will get this error:
Other than, that thanks for the article, cheers
Are you met the same error?
Hey, if you are comfortable with it. You can raise a PR with the changes and I will merge the changes to the repo. Thanks for letting everyone know about the recent changes.
Follow this one github.com/deadwing7x/react-with-w...
Same issue .
Hello,
When i run "npm run webpack", the webpack script was missing. I did all the steps but for a strange reason, i had to add the scripts manually to make it work.
By the way, it's not a problem at all.
Very nice topic, you helped me A LOT!
Hey, thank you for your feedback! 😃 I missed adding a line to add webpack in the script! I just attached the image after adding it! That might have caused the confusion! Anyways thank you! 😁
Same thing happened to me, which step i had to replace to come out of this error. Please suggest. TIA
So, you need to add these two scripts in the package.json file.
You can find the link to the file in this link below:
github.com/deadwing7x/react-with-w...
Great and useful article. It's always best to know how stuff works behind the scenes.
The only correction is that @babel /plugin-proposal-class-properties is not required as long as @babel /preset-env is used, see babeljs.io/docs/en/babel-plugin-pr...
Thanks :) Merged your PR ;)
Cheers
can somebody guide me about the alternatives of
node-sass image-webpack-loader. these two packages contains some vulnerabilities. However these packages are only being used in dev mode but still I want alternatives of these two with out vulnerabilities.Thank you for the article.
From the last sentence in point 9, you said 'The webpack-dev-server took everything from the src folder and outputted it to our browser.'
However I do not understand how is webpack-dev-server able to do that since the src/index.html does not link index.js.
Thanks for your feedback. 😄
So, what webpack-dev-server does is, it just shows whatever files are needed to be displayed on the browser. If you check the devServer attribute in the config file, you will see that I mentioned it to take all files from the ‘src’ folder and display them on the browser. However the part which you are looking for, is done by the html-webpack-plugin. This is another npm package, which takes the output js file, i.e, the single/ final prod build file and then calls it in the index.html file.
If you are going to refer this tutorial to create an NPM package using React, just remember to edit
mainproperty in yourpackage.jsonto point to thebuilddirectory. Other than that, great article 😃That’s right! Thanks for sharing that! 😁🙌🏻
This is a quality article. I especially like how you take time to talk about why each package is needed, instead of just adding everything and throwing the final configuration. Thank you.
Thank you so much! 😁🙌🏻
Nice! it works perfectly fine!
Thanks 😬
Hey I want apply Webpack to existing project,is that even possible ,if it’s what are the extra steps I have to follow apart from this article, I followed all the steps but once I import my existing app.js to this workflow and try npm run build it’s creates a build successfully but while running index.html it’s throws an error
Hi there, after the build script I noticed that the index.bundle.js is using eval();
Example: eval("console.log(\"aaa\");\n\n//# sourceURL=webpack://reactapp/./src/components/a.js?");
In this example I have a folder in "src" called "components", there I have 1 script that simply has "console.log('aaa')". I include this script in "index.js" like so: import './components/a';. After the build command I can see it with eval() in index.bundle.js. Is this correct ?
Hello,
I'm unable to run webpack after step 8. Please help me to move forward, it is showing missing script in command. TIA
Brilliant Article & Tutorial! Salute! It saved me :-)
Thank you a lot!
For those who start with monorepo too, that's the amazing article about config step-by-step webpack.
Thank you for your feedback 😄
react-webpack-setup
github.com/RahulUD/react-webpack-s...
Don't install image-webpack-loader it contains 19 vulnerabilities (14 moderate, 5 high)