Today, start learning the second verse!!!
工欲善其事, its prerequisite
React recommended we use Webpack to package files, then we use it! (actually really don't want to use AH)
As for the advantages of the online writing of the hype, we solve ah ...
This section is mainly to learn how to configure Webpack, this thing I made a full day to get smattering, hey, poor brain is a disadvantage ...
1. Preparing for work in advance
(PS: Install node yourself, don't blame me for not reminding you)
First of all, you need to have a folder of your own, as for what name you look at, my call Reactdemo
Put a test in the HTML plus a JS folder
Click Win+r, enter cmd into the console, and enter your own directory
Enter NPM Init
It's all right.
and go into your folder to see if there's a Package.json file.
OK, now let's start with the global installation.
Continue entering NPM install-g Webpack
Then wait silently ...
Now you can configure the Webpack, this to be under more things, the network is not good people mourn it (I spent 2 hours--!) ）
Enter NPM install Style-loader--save-dev
(The loader section is not there ah, because just installed, in the loading of a time too wasted, sorry Ah, forgive my lazy it)
Enter NPM install Css-loader--save-dev
Enter NPM install Jsx-loader--save-dev
After the local installation Webpack
Enter NPM install Webpack--save-dev
After success your folder becomes this kind of paper:
Before this use, but also to create a webpack.config.js file, this file, is to tell Webpack what you want to do, here is a demo, so it is easy to write a simple point (more I still do not understand it, huh!) ）
Finally to be able to use the time, think of the heart or a little excited about it!
When to be, to succeed ...
This time your folder becomes this kind of paper:
Webpack automatically helped us build the build folder, there is a build.js ...
However, I do not have to introduce index.js in the HTML, the direct introduction of build.js can be ...
That's basically all about it.
In addition, I also met in the use of the appearance is not internal command (as if to call this, we understand the good) This error, the solution is also posted here
This is generally the case because of environmental variables.
We enter by pressing Win+pause
Select the one I drew and click this:
Click Edit or double-click to add the path.
This time the smart baby will ask where the path is? Gross, negligence, this you may have to read the path from above to come again.
Anyway mine is here, others are not I really do not know.
OK, this is the path, add to the environment variables mentioned above, OK!!!
The end of the famous saying: There is no perfect article, as there is no outright despair.
(The previous chapter was despised by GM, said not technical articles, not let the home page, indeed I am very vegetables, but do not have to do so!!! Moon I also, moon I also, moon I also ... ）
Reference: Webpack official website http://webpack.github.io/
30 minutes to teach you to learn Webpack combat http://www.th7.cn/web/html-css/201509/120709.shtml (this big capitalization is really good, at least not foggy, like my IQ can understand)
Learn react starting from 0 (b)