-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathreactTutPart1.html
More file actions
215 lines (203 loc) · 123 KB
/
reactTutPart1.html
File metadata and controls
215 lines (203 loc) · 123 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Blogolio - A simple Blog page build with React" />
<title>Blogolio - A simple Blog page build with React</title>
<!-- stylesheets -->
<link rel="stylesheet" href="/Blogolio/src/css/blogolio.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="/Blogolio/src/css/bootstrap-social.css" />
<link href="/Blogolio/src/fonts/fontawesome-webfont.woff2" />
<link href="/Blogolio/src/fonts/fontawesome-webfont.woff" />
<link href="/Blogolio/src/fonts/fontawesome-webfont.eot" />
<link href="/Blogolio/src/fonts/fontawesome-webfont.svg" />
<link rel="stylesheet" href="/Blogolio/src/css/font-awesome.css" />
<!-- favicon.ico -->
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' >
<!-- Google Roboto Fonts for text -->
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="root">
<div data-reactid=".77grtj9j40" data-react-checksum="778931202"><div class="blog-header" data-reactid=".77grtj9j40.0"><img class="autoresize" src="/Blogolio/965424424564d659cadb32ad60a475b3.jpg" height="180" data-reactid=".77grtj9j40.0.0"/></div><div class="blog-masthead" data-reactid=".77grtj9j40.1"><div class="container" data-reactid=".77grtj9j40.1.0"><nav class="nav" data-reactid=".77grtj9j40.1.0.0"><ul data-reactid=".77grtj9j40.1.0.0.0"><li data-reactid=".77grtj9j40.1.0.0.0.0"><a class="blog-nav-item transition" data-reactid=".77grtj9j40.1.0.0.0.0.0">Home</a></li><li data-reactid=".77grtj9j40.1.0.0.0.1"><a class="blog-nav-item transition" data-reactid=".77grtj9j40.1.0.0.0.1.0">About</a></li><li data-reactid=".77grtj9j40.1.0.0.0.2"><a class="blog-nav-item transition" data-reactid=".77grtj9j40.1.0.0.0.2.0">Projects</a></li><li data-reactid=".77grtj9j40.1.0.0.0.3"><a class="blog-nav-item transition" data-reactid=".77grtj9j40.1.0.0.0.3.0">Contact</a></li></ul></nav></div></div><div class="container" data-reactid=".77grtj9j40.2"><div data-reactid=".77grtj9j40.2.0"><div class="row" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1"><div class="entry-content-main" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0"><h2 data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.0">React Tutorial - Part 1</h2><div data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1"><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.0"/><h3 data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1">New vs. „Old“ Web Development</h3><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2">The world of web and mobile development is full of new and emerging technologies. And one thing is certain - change is coming, as it always does. This latest change I’m thinking of is called React (reactjs). As of the publication of this article React is an already known part in web development. Many have heard of it and may have understood it as the View part of the MVC pattern (which is not entirely true), and many are still trying to change their development process with it using a mix of npm and redux functionalities. Most are probably fighting with redux features and the way of implementing functional programming paradigms into their applications, since there are no obligatory ways that show how things should be (that is why react and redux are a beautiful combination :) ). This article, however, will take a step back and go more into detail about a maintainable project structure for development and production, how to actually use react within that architecture, and why it is helpful to know your way around webpack for bigger production configurations.</p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.4">You may also have read my first blog entry, which is a hint as to what’s still to come. This whole blog page is created using React and as a general explanation, I will show you how things are done building your own single web blog page by demonstrating the whole „code in development“, which was used to build this little blog page of my own. Going one step further, I will show you the configurations to build static content and how to host it on Github as your web page. That’s all. Let’s start with the project structure.</p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.5"/><h3 data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.6">Project Structure (Flux architecture)</h3><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.7"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.7.0">You may have read about new web development structures based almost entirely on pure javascript files instead of on html. The only thing you need to know at the moment is that we will use the so called flux architecture to build first steps, since this tutorial should be more of a practical guide than a theoretical one, but feel free to read the following page if you really want to know why the flux architecture is a commonly used way to structure your react projects => </span><a class="gray" target="_blank" href="https://facebook.github.io/flux/docs/overview.html" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.7.1">https://facebook.github.io/flux/docs/overview.html</a><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.7.2"> . The following structure illustrates the whole blog web page in development within the flux architecture.</span></p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.8"/><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.9"/><img src="/Blogolio/4a127a006a33ff44a147f05d220204d3.png" width="40%" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.a"/><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.b"/><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.c"/><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.d"/><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.e"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.f">Since we are building the project step by step, create your project folder named as you like e.g.: i used Blogolio as my project folder name. For now, please use the structure above to create files and folders which are NOT greyed out. If you are finished you should have a project folder named e.g.: Blogolio, 1 underlying file (index.html) and an underlying src folder. Within that src folder you should have 1 index.js file and 3 folders (assets, components, containers). These folders are pretty much everything you gonna need, but we will add more later on, don’t worry.</p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.g"/><h3 data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.h">npm</h3><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.0">We will use a node server to run and test our development project. That means we will need to install npm </span><del data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.1">(node package manager)</del><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.2">.</span><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.3"/><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.4"/><b data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.5">EDIT (11.05.2016)</b><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.6"> - Thanks to my friend Patrick who pointed out that npm actually doesn't stand for node package manager. It is indeed used to manage package dependencies, but it is a common mistake that the believed akronym is actually a backronym ( </span><a class="gray" target="_blank" href="https://en.wikipedia.org/wiki/Backronym" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.7">https://en.wikipedia.org/wiki/Backronym</a><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.8"> ) and is just a command, which, i would say, sarcastically gets used to define random akronyms it may stand for. Since December 2014 possible expansions of the letters n, p and m are gathered in a Github project called npm-expansion, which includes a method used to return random n-p-m expansions. You can also see possible random expansions in the upper left corner of npm's webpage ( </span><a class="gray" target="_blank" href="https://www.npmjs.com" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.9">https://www.npmjs.com</a><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.a"> ). Alright, now that i've ruined the joke lets go on.</span><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.b"/><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.c"/><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.d">If you don’t have npm, get it by installing node.js => </span><a class="gray" target="_blank" href="https://docs.npmjs.com/getting-started/installing-node" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.e">https://docs.npmjs.com/getting-started/installing-node</a><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.i.f">, it’s essential for handling all dependencies in our project and also includes all script calls that we need to build our web app. Don’t come back to this tutorial until you’ve set up npm properly. It’s really important!</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.j"><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.j.0"/><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.j.1">Npm and webpack together are a good way to handle things on their own, but if you still feel the need to use a build tool like grunt, I don’t mind.</span></p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.k"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.l">For the „old“ web development folks out there, you are probably going to notice that there is no xampp, no mampp, or any other server test deployment tool involved. Neither is the project structure directly for static websites. Welcome to the new way of web development. At the end of this tutorial series we’re going to be more dynamic to create the content we want, specified as configuration in production.</p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.m"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.n"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.n.0">As I said, we’re going to have a node server to test our development environment. Therefore we are going to need something which creates our </span><b data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.n.1">test dev node server</b><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.n.2">. We need to use npm to create our project dependency file, which is called </span><b data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.n.3">package.json</b><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.n.4">. To do that, open your project folder in the terminal and type in the following command.</span></p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.o"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.o.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.o.0.$code-segement0">npm init</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.p">For a faster configuration type in</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.q"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.q.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.q.0.$code-segement0">npm init –y</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.r">After finishing the process you will have a package.json file where we define every package dependency we need in the project. To be more specific, you do not need to download script files and add them globally to your .html files, since we „require“ those scripts through dependencies from this package.json file inside javascript code. Sounds strange? Don’t worry, you will get a hang of it.</p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.s">We are going to start building up our local node server by adding our first dependencies.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.t"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.t.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.t.0.$code-segement0">npm install --save-dev webpack
npm install --save-dev webpack-dev-server</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.u">or simply</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.v"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.v.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.v.0.$code-segement0">npm install --save-dev webpack webpack-dev-server</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.w"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.w.0">We added </span><b data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.w.1">webpack</b><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.w.2"> and </span><b data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.w.3">webpack-dev-server</b><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.w.4">, which are independent components. Webpack is our building tool we are going to use to decide if we want to build in development or in production and webpack-dev-server is our package we will use to configure our local node server which is used in the development build phase inside of webpack.</span><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.w.5"/><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.w.6">Also, just to see how it looks, open up your package.json file in any editor if you haven’t done so already. I recommend using Atom ( </span><a class="gray" target="_blank" href="https://atom.io/" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.w.7">https://atom.io/</a><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.w.8"> ) for web development. Add the whole project folder to your editor of choice. If you look at the root folder of your project you will also notice a folder named node_modules. It was created downloading and adding our first „library“ dependencies. The npm install command does not only add dependencies to the package.json file, but also downloads them into a common folder named node_modules.</span><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.w.9"/><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.w.a">Something you may still be wondering about - now that we’ve installed the packages and added them as dependencies to our project, how does the project know how to build itself? It doesn’t, therefore we create some new files. Look at the project structure and add the missing files</span></p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.x"/><img src="/Blogolio/01c9c905d1bebbd348072dbbd238b8fe.png" width="40%" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.y"/><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.z"/><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.10"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.11"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.11.0">The reason why we do not have one master configuration file for everything is simple. We need to use npm in order to run different </span><b data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.11.1">script commands</b><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.11.2">. This includes building for development or production. We haven’t added configurations for production yet and will only focus on the development part for now. Please be patient and read every step carefully in this tutorial. Open up your package.json file and update its content to look like the following script commands in the scripts section.</span></p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.12"/><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.13"/><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0"><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement0.$code-segment-1-0">"scripts"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement1">: {
</span><span style="color:#81a2be;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement2.$code-segment-1-0">"start"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement3">: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement4"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement4.$code-segment-1-0">"cross-env NODE_ENV=development node server.dev.js"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement5">,
</span><span style="color:#81a2be;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement6"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement6.$code-segment-1-0">"build"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement7">: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement8"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement8.$code-segment-1-0">"cross-env NODE_ENV=production webpack --config webpack.prod.config.js --progress --colors"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement9">,
</span><span style="color:#81a2be;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement10"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement10.$code-segment-1-0">"test"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement11">: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement12"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement12.$code-segment-1-0">"echo "</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement13">Error: no test specified</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement14"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement14.$code-segment-1-0">" && exit 1"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement15">,
</span><span style="color:#81a2be;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement16"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement16.$code-segment-1-0">"clean"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement17">: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement18"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement18.$code-segment-1-0">"rm -rf build"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.14.0.$code-segement19">
}</span></code></pre><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.15"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.16">You can call all the script commands via npm, e.g.:</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.17"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.17.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.17.0.$code-segement0">npm start
npm test
</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.18">or</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.19"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.19.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.19.0.$code-segement0">npm run build
npm run clean
</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1a">As you can see, two of the script commands are called without „run“. Some script commands are predefined in npm and don’t need to be explicitly called with „run“. You can look up a list of all commands on npm’s website.</p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1b"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1c"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1c.0">Back to the topic. On the right side of every script call are your own defined commands. Which means, if i run npm start, the </span><b data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1c.1">„cross-env NODE_ENV=development node server.dev.js“</b><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1c.2"> part will be called.</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1d"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1d.0">NODE_ENV</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1d.1"> = is an environment variable which is mainly used to check if a node application is in production or development. A typical use-case is to give additional log or debug information if the variable is set to development.</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1e"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1e.0">Cross-env</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1e.1"> = it is used to set the NODE_ENV variable regardless of the operating system.</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1f">In unix systems the variable is set e.g.:</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1g"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1g.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1g.0.$code-segement0">export NODE_ENV=production</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1h">while in windows systems it is set e.g.:</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1i"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1i.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1i.0.$code-segement0">set NODE_ENV=production</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1j">Since cross-env comes from package, install it through the following npm command.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1k"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1k.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1k.0.$code-segement0">npm install --save-dev cross-env</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1l">Be sure to have cross-env installed so that you can develop without problems if you should switch the OS.</p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1m"/><h3 data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1n">Webpack & webpack-dev-server</h3><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1o">You may have recognized that we have set the development option to the npm start script command. There is also a command called node, which tries to call a node server from a javascript file called server.dev.js. This means that we have to define our development node server inside of this file. Open server.dev.js and copy the following code.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0"><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement0.$code-segment-1-0">// Gets called when running npm start</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement1">
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement2.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement3"> webpack = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement4"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement4.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement5">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement6"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement6.$code-segment-1-0">'webpack'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement7">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement8"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement8.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement9"> WebpackDevServer = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement10"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement10.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement11">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement12"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement12.$code-segment-1-0">'webpack-dev-server'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement13">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement14"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement14.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement15"> config = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement16"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement16.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement17">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement18"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement18.$code-segment-1-0">'./webpack.dev.config'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement19">);
</span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement20"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement20.$code-segment-1-0">console</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement21">.log(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement22"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement22.$code-segment-1-0">'Starting server...'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement23">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement24"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement24.$code-segment-1-0">new</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement25"> WebpackDevServer(webpack(config), { </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement26"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement26.$code-segment-1-0">// Start a server</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement27">
publicPath: config.output.publicPath,
hot: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement28"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement28.$code-segment-1-0">true</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement29">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement30"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement30.$code-segment-1-0">// With hot reloading</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement31">
inline: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement32"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement32.$code-segment-1-0">false</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement33">,
historyApiFallback: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement34"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement34.$code-segment-1-0">true</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement35">,
quiet: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement36"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement36.$code-segment-1-0">true</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement37"> </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement38"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement38.$code-segment-1-0">// Without logging</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement39">
}).listen(</span><span style="color:#f99157;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement40"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement40.$code-segment-1-0">3000</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement41">, </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement42"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement42.$code-segment-1-0">'localhost'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement43">, </span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement44"><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement44.$code-segment-1-0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement44.$code-segment-1-0.$code-segment-1-0">function</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement44.$code-segment-1-1"> (</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement44.$code-segment-1-2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement44.$code-segment-1-2.$code-segment-1-0">err, result</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement44.$code-segment-1-3">) </span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement45">{
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement46"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement46.$code-segment-1-0">if</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement47"> (err) {
</span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement48"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement48.$code-segment-1-0">console</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement49">.log(err);
} </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement50"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement50.$code-segment-1-0">else</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement51"> {
</span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement52"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement52.$code-segment-1-0">console</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement53">.log(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement54"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement54.$code-segment-1-0">'Server started'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement55">);
</span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement56"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement56.$code-segment-1-0">console</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement57">.log(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement58"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement58.$code-segment-1-0">'Listening at localhost:3000'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1p.0.$code-segement59">);
}
});</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1q"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1q.0">As you can see, this is the first time we </span><b data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1q.1">„require“</b><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1q.2"> one of our package dependencies instead of having a global script tag inside an .html file. We practically define a variable and use all package methods with it. Everything seems to be set up now, right? Wrong. If we call npm start it will fail. We require webpack and webpack-dev-server, but we also require some file that isn’t in our npm package dependencies.</span></p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1r"/><h3 data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1s">Webpack config for development</h3><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1t">Let’s put some code into webpack.dev.config!</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0"><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0.$code-segement0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0.$code-segement0.$code-segment-1-0">module</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0.$code-segement1">.exports = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0.$code-segement2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0.$code-segement2.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0.$code-segement3">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0.$code-segement4"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0.$code-segement4.$code-segment-1-0">"./makeconfig"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0.$code-segement5">)({
prod: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0.$code-segement6"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0.$code-segement6.$code-segment-1-0">false</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1u.0.$code-segement7">
});</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1v">As the name implies, this file calls another file for configuration purposes. The reason to define an extra file is just to set a boolean value for development, so that the makeconfig.js file knows which kind of plugins need to be called. The module.exports command is specific to webpack configuration files. The webpack server loads all configurations by calling the webpack.dev.conf. It will return the content of the makeconfig.js file and specified plugins.</p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1w"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1x">To finish the project development setup, we need to write our makeconfig.js file and specify the used modules/plugins in development.</p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1y">Let’s put some more code into our config (makeconfig.js) file!</p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.1z">First, we will start to add more packages to our dependency list.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.20"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.20.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.20.0.$code-segement0">npm install --save-dev path html-webpack-plugin appcache-webpack-plugin extract-text-webpack-plugin</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.21">To explain everything I will tell you why we need to include those package dependencies.</p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.22"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.23"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.23.0">path</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.23.1"> = is a copy of the NodeJS path module and is used to find paths inside our project. Nothing more, nothing less. ( </span><a class="gray" target="_blank" href="https://www.npmjs.com/package/path" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.23.2">https://www.npmjs.com/package/path</a><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.23.3"> )</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.24"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.24.0">Html-webpack-plugin</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.24.1"> = at some point we will need an entry point to host our website. This plugin is used to create an html5 template file ( index.html ) that includes all webpack bundles that are build. This means that every javascript file will be automatically added inside a </span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.24.2"><script></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.24.3"> tag. ( </span><a class="gray" target="_blank" href="https://www.npmjs.com/package/html-webpack-plugin" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.24.4">https://www.npmjs.com/package/html-webpack-plugin</a><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.24.5"> )</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.25"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.25.0">Extract-text-webpack-plugin</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.25.1"> = this plugin will be used to add a css file inside our template index.html via </span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.25.2"><link></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.25.3"> tag. It kind of works together with the html-webpack-plugin. ( </span><a class="gray" target="_blank" href="https://www.npmjs.com/package/extract-text-webpack-plugin" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.25.4">https://www.npmjs.com/package/extract-text-webpack-plugin</a><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.25.5"> )</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.26">It is important to know that you do not need to use this plugin for css components. In general every css definition will be added as inlined into the javascript bundle file that is created during the build process. In most cases though, it is better practice to add the extract-text-webpack-plugin to produce a main .css file and load the content parallel to the bundle.js file. Your build process will be faster since the bundle.js does not need to load every css definition on its own and is linked to css definition instead.</p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.27"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.27.0">Appcache-webpack-plugin</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.27.1"> = a plugin to cache assets and create a manifest.appcache file. ( </span><a class="gray" target="_blank" href="https://www.npmjs.com/package/appcache-webpack-plugin" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.27.2">https://www.npmjs.com/package/appcache-webpack-plugin</a><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.27.3"> )</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.28"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.28.0">react-static-webpack-plugin</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.28.1"> = this plugin will help to build our static web page content. More about this plugin later. ( </span><a class="gray" target="_blank" href="https://www.npmjs.com/package/react-static-webpack-plugin" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.28.2">https://www.npmjs.com/package/react-static-webpack-plugin</a><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.28.3"> )</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.29">Open your makeconfig.js file and add the first lines of code:</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0"><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement0.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement1"> path = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement2.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement3">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement4"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement4.$code-segment-1-0">'path'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement5">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement6"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement6.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement7"> webpack = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement8"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement8.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement9">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement10"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement10.$code-segment-1-0">'webpack'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement11">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement12"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement12.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement13"> HtmlWebpackPlugin = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement14"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement14.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement15">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement16"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement16.$code-segment-1-0">'html-webpack-plugin'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement17">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement18"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement18.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement19"> AppCachePlugin = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement20"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement20.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement21">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement22"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement22.$code-segment-1-0">'appcache-webpack-plugin'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement23">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement24"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement24.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement25"> ExtractTextPlugin = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement26"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement26.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement27">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement28"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement28.$code-segment-1-0">'extract-text-webpack-plugin'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement29">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement30"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement30.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement31"> StaticSitePlugin = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement32"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement32.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement33">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement34"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement34.$code-segment-1-0">'react-static-webpack-plugin'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2a.0.$code-segement35">);</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2b">Now that we defined our plugin variables we need to create some configurations with them. To let the webpack build process know that theses are needed configurations, we start to write a function declaration with the module.exports command.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0"><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement0.$code-segment-1-0">module</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement1">.exports = </span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement2"><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement2.$code-segment-1-0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement2.$code-segment-1-0.$code-segment-1-0">function</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement2.$code-segment-1-1">(</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement2.$code-segment-1-2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement2.$code-segment-1-2.$code-segment-1-0">options</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement2.$code-segment-1-3">)</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement3">{
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement4"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement4.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2c.0.$code-segement5"> entry, jsLoaders, plugins, cssLoaders;</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2d">Then we need to decide if we are in production or development. Remember that we gave the makeconfig.js file a boolean parameter from webpack.dev.conf to let the configuration know that we are in development.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2e"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2e.0"><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2e.0.$code-segement0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2e.0.$code-segement0.$code-segment-1-0">//If production flag is set to true</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2e.0.$code-segement1">
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2e.0.$code-segement2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2e.0.$code-segement2.$code-segment-1-0">if</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2e.0.$code-segement3"> (options.prod) {
} </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2e.0.$code-segement4"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2e.0.$code-segement4.$code-segment-1-0">else</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2e.0.$code-segement5"> {
}</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2f">since we call webpack.dev.conf later on, the options.prod will be false, which means that we need to define our development settings in the else part.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0"><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement0.$code-segment-1-0">else</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement1"> {
entry = [
</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement2.$code-segment-1-0">'webpack-dev-server/client?http://localhost:3000'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement3">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement4"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement4.$code-segment-1-0">//Needed for hot reloading</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement5">
</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement6"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement6.$code-segment-1-0">'webpack/hot/only-dev-server'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement7">,
path.resolve(__dirname, </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement8"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement8.$code-segment-1-0">'src/index.js'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement9">)
];
cssLoaders = </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement10"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement10.$code-segment-1-0">'style-loader!css-loader'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement11">;
plugins = [
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement12"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement12.$code-segment-1-0">new</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement13"> webpack.HotModuleReplacementPlugin(), </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement14"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement14.$code-segment-1-0">//for hot reloading</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement15">
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement16"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement16.$code-segment-1-0">new</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement17"> HtmlWebpackPlugin({
template: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement18"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement18.$code-segment-1-0">'index.html'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement19">,
inject: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement20"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement20.$code-segment-1-0">true</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2g.0.$code-segement21">
})
]
}</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2h">We set up our development server by defining the host and the port. In this case it’s our localhost and the port number 3000 (you can choose any port number though).</p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2i">You may have heard about hot reloading. It is a new feature which allows some sort of callback when a file was changed. The server reacts and implements approximate changes. More on that later though! For now we activate hot reloading by adding the webpack/hot/only-dev-server definition.</p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2j">Of course we need to define an entry point for our application to start up. Since the .html file is a template file which is generated and webpack needs .js(or .jsx) files to work we need to define an index.js. Use the path.resolve method to define where your index.js files should be. We will create content specific files later.</p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2k">Right after the module.exports function, we set up some variables that we will use to load different package content.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2l"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2l.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2l.0.$code-segement0">cssLoaders = </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2l.0.$code-segement1"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2l.0.$code-segement1.$code-segment-1-0">'style-loader!css-loader'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2l.0.$code-segement2">;</span></code></pre><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2m"/><h3 data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2n">Webpack config and loader modules</h3><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2o"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2o.0">Loaders will be used to load content which is not typically compatible with javascript code, e.g.: images, css files etc. If you define a loader, the whole project will be searched for loader specific file types and „required.“ Since i cannot explain it better than the official documentation, you better read about it here => </span><a class="gray" target="_blank" href="https://webpack.github.io/docs/loaders.html" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2o.1">https://webpack.github.io/docs/loaders.html</a><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2o.2">. It took me some time to understand how loaders work exactly and it is probably best if you find out details on your own. This way, you may have an easier time understanding subject matter.</span></p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2p"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2q">The above loaders named style-loader and css-loader are packages and need to be added to our dependency list. Install them.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2r"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2r.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2r.0.$code-segement0">npm install --save-dev style-loader css-loader</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2s">The next thing we need to do is add and configure the plugins we use.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement0">plugins = [
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement1"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement1.$code-segment-1-0">new</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement2"> webpack.HotModuleReplacementPlugin(), </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement3"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement3.$code-segment-1-0">//for hot reloading</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement4">
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement5"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement5.$code-segment-1-0">new</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement6"> HtmlWebpackPlugin({
template: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement7"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement7.$code-segment-1-0">'index.html'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement8">,
inject: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement9"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement9.$code-segment-1-0">true</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2t.0.$code-segement10">
})
]
}</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2u">The else here is closed. This means we are finished with defining our development specific plugins.</p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2v"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2v.0">Since hot reloading is included in webpack we need to activate it with the </span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2v.1">webpack.HotModuleReplacementPlugin()</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2v.2"> method. The </span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2v.3">HtmlWebpackPlugin( .. )</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2v.4"> will be used to define our entry html5 file to inject </span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2v.5"><script></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2v.6">- and </span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2v.7"><link></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2v.8"> tags. And that’s it.</span></p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2w"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2x">Now the only thing left is to define our return method and explicitly tell where our output should be build. Furthermore we will include some more module loaders. This part is very important! Why? You’ll see.</p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2y"/><h3 data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.2z">How to define the build output</h3><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0"><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0.$code-segement0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0.$code-segement0.$code-segment-1-0">return</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0.$code-segement1"> {
entry: entry,
output: {
path: path.join(__dirname, </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0.$code-segement2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0.$code-segement2.$code-segment-1-0">'build'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0.$code-segement3">),
publicPath: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0.$code-segement4"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0.$code-segement4.$code-segment-1-0">'/'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0.$code-segement5">,
filename: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0.$code-segement6"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0.$code-segement6.$code-segment-1-0">'static/bundle.js'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.30.0.$code-segement7">
},
</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.31">To declare and build our output webpack bundle.js, which contains our web page content, we need to define an entry point. We already did that above when we defined plugins to use for development. Use the variable named entry and put it after the „entry:“ attribute.</p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.32"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.33"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.33.0">publicPath</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.33.1"> = This is the path that will be used to search for relative files on your development or production server. If we would start our development server, the entry point would search in the root directory of the deployed files.</span></p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.34"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.35"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.35.0">filename</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.35.1"> = This attribute is used to define a name for the bundled js file. I generally called it bundle.js, because in most cases you will find repositories out there that define it just as bundle.js, but you do not have to name it like that. You can call it whatever you want.</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.36">(Furthermore you can use relative path declarations before the naming convention, e.g.: „static/“, which will be a directory named static containing the bundle.js )</p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.37"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.38">That’s all for the output.</p><h3 data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.39">Module Loader Configurations</h3><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0"><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement0.$code-segment-1-0">module</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement1">: {
loaders: [
{
test: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement2.$code-segment-1-0">/.(es6|js|jsx)$/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement3">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement4"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement4.$code-segment-1-0">// Transform all .js files required somewhere within an entry point...</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement5">
loader: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement6"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement6.$code-segment-1-0">'babel'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement7">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement8"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement8.$code-segment-1-0">// ...with the specified loaders...</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement9">
query: {compact: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement10"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement10.$code-segment-1-0">false</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement11">},
exclude: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement12"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement12.$code-segment-1-0">/node_modules/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement13"> </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement14"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement14.$code-segment-1-0">// ...except for the node_modules folder.</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement15">
},
{
test: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement16"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement16.$code-segment-1-0">/.css$/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement17">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement18"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement18.$code-segment-1-0">// Transform all .css files required somewhere within an entry point...</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement19">
loader: cssLoaders </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement20"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement20.$code-segment-1-0">// ...with normal css or PostCSS (if used)</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement21">
},
{
test: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement22"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement22.$code-segment-1-0">/.ttf(?v=d+.d+.d+)?$/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement23">,
loader: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement24"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement24.$code-segment-1-0">"url?limit=10000&mimetype=application/octet-stream"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement25">
},
{
test: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement26"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement26.$code-segment-1-0">/.(jpg|jpeg|gif|png)$/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement27">,
loader:</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement28"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement28.$code-segment-1-0">'url-loader?limit=10000'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement29">,
exclude: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement30"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement30.$code-segment-1-0">/node_modules/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement31">
},
{
test: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement32"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement32.$code-segment-1-0">/.(eot|woff|woff2|svg)(?S*)?$/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement33">,
loader: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement34"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement34.$code-segment-1-0">"file-loader?limit=10000&mimetype=image&name=[path][name].[ext]"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement35">
</span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement36"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement36.$code-segment-1-0">//don’t exclude node_modules since file loader takes .eot files from bootstrap in node_modules</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3a.0.$code-segement37">
}
]
},</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3b"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3b.0">module</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3b.1"> = the attribute where a loader group is defined.</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3c"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3c.0">loaders</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3c.1"> = the attribute to define a group (array) of loaders.</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3d"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3d.0">test</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3d.1"> = this attribute is used to specify the file types we are searching for.</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3e"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3e.0">loader</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3e.1"> = the attribute to define a specific loader, which is nothing else than a library dependency we use.</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3f"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3f.0">exclude</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3f.1"> = this attribute is used to tell a loader to stop searching in specific directories.</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3g">As you can see, the test attribute needs regex-related syntax to define file types. (I personally think that the name here is a little bit misleading and should be changed to something else). The first loader we define is Babel. It is a very important part in react development, because babel is also used to define pre versions of ES e.g.: ES5. You probably wonder where the definition for ES5 is. It is inside a file called .babelrc, but we get to that in a moment. Use the npm install command to install babel.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3h"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3h.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3h.0.$code-segement0">npm install babel-core babel-loader --save-dev</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3i"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3i.0">query</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3i.1"> = The query attribute is a babel loader dependent attribute. I’m not sure if it can be set to more options than true, false or auto, but all it does is to decide if you want to use javascript files bigger than 100kb and impede deoptimization of those files while set to true. So we set this option to false.</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3j">For .css files we use the defined loaders (cssLoaders) we set earlier. We already have them as dependency in our node_modules folder.</p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3k"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3k.0">The last two loaders are used to find images and other files defined in the test attribute. We use the </span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3k.1">url-loader</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3k.2"> for images, since javascript doesn’t need a transcription for those files and the </span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3k.3">file-loader</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3k.4"> for as yet unknown file types.</span></p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3l"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3m">Last but not least, there are some attributes left before the configuration for our development settings is finished.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement0"> plugins: plugins,
target: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement1"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement1.$code-segment-1-0">"web"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement2">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement3"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement3.$code-segment-1-0">// Make web variables accessible to webpack, e.g. window</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement4">
stats: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement5"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement5.$code-segment-1-0">false</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement6">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement7"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement7.$code-segment-1-0">// Don’t show stats in the console</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement8">
progress: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement9"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement9.$code-segment-1-0">true</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3n.0.$code-segement10">
}
}</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3o">Don’t forget to close module.exports here.</p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3p"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3p.0">plugins</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3p.1"> = the attribute to set our defined plugins for development (or production)</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3q"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3q.0">target</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3q.1"> = the attribute to allow certain commands to be used e.g.: window</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3r"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3r.0">stats</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3r.1"> = the attribute to allow stats in the console. Don’t set this command if you build for production!</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3s"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3s.0">progress</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3s.1"> = this attribute is set to true if you want to see what webpack is building, else set it to false.</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3t">If you set up everything correctly you should have a makeconfig.js file that looks like the following content:</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0"><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement0.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement1"> path = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement2.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement3">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement4"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement4.$code-segment-1-0">'path'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement5">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement6"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement6.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement7"> webpack = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement8"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement8.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement9">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement10"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement10.$code-segment-1-0">'webpack'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement11">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement12"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement12.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement13"> HtmlWebpackPlugin = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement14"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement14.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement15">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement16"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement16.$code-segment-1-0">'html-webpack-plugin'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement17">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement18"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement18.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement19"> AppCachePlugin = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement20"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement20.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement21">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement22"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement22.$code-segment-1-0">'appcache-webpack-plugin'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement23">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement24"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement24.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement25"> ExtractTextPlugin = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement26"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement26.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement27">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement28"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement28.$code-segment-1-0">'extract-text-webpack-plugin'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement29">);
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement30"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement30.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement31"> StaticSitePlugin = </span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement32"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement32.$code-segment-1-0">require</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement33">(</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement34"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement34.$code-segment-1-0">'react-static-webpack-plugin'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement35">);
</span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement36"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement36.$code-segment-1-0">module</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement37">.exports = </span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement38"><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement38.$code-segment-1-0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement38.$code-segment-1-0.$code-segment-1-0">function</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement38.$code-segment-1-1">(</span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement38.$code-segment-1-2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement38.$code-segment-1-2.$code-segment-1-0">options</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement38.$code-segment-1-3">)</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement39">{
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement40"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement40.$code-segment-1-0">var</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement41"> entry, jsLoaders, plugins, cssLoaders;
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement42"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement42.$code-segment-1-0">if</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement43"> (options.prod) {
} </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement44"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement44.$code-segment-1-0">else</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement45"> {
entry = [
</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement46"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement46.$code-segment-1-0">'webpack-dev-server/client?http://localhost:3000'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement47">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement48"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement48.$code-segment-1-0">//Needed for hot reloading</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement49">
</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement50"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement50.$code-segment-1-0">'webpack/hot/only-dev-server'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement51">,
path.resolve(__dirname, </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement52"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement52.$code-segment-1-0">'src/index.js'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement53">)
];
cssLoaders = </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement54"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement54.$code-segment-1-0">'style-loader!css-loader'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement55">;
plugins = [
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement56"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement56.$code-segment-1-0">new</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement57"> webpack.HotModuleReplacementPlugin(), </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement58"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement58.$code-segment-1-0">//for hot reloading</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement59">
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement60"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement60.$code-segment-1-0">new</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement61"> HtmlWebpackPlugin({
template: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement62"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement62.$code-segment-1-0">'index.html'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement63">,
inject: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement64"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement64.$code-segment-1-0">true</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement65">
})
]
}
</span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement66"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement66.$code-segment-1-0">return</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement67"> {
entry: entry,
output: {
path: path.join(__dirname, </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement68"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement68.$code-segment-1-0">'build'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement69">),
publicPath: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement70"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement70.$code-segment-1-0">'/'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement71">,
filename: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement72"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement72.$code-segment-1-0">'static/bundle.js'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement73">
},
</span><span style="color:#b5bd68;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement74"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement74.$code-segment-1-0">module</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement75">: {
loaders: [
{
test: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement76"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement76.$code-segment-1-0">/.(es6|js|jsx)$/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement77">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement78"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement78.$code-segment-1-0">// Transform all .js files required somewhere within an entry point...</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement79">
loader: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement80"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement80.$code-segment-1-0">'babel'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement81">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement82"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement82.$code-segment-1-0">// ...with the specified loaders...</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement83">
query: {compact: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement84"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement84.$code-segment-1-0">false</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement85">},
exclude: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement86"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement86.$code-segment-1-0">/node_modules/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement87"> </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement88"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement88.$code-segment-1-0">// ...except for the node_modules folder.</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement89">
},
{
test: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement90"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement90.$code-segment-1-0">/.css$/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement91">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement92"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement92.$code-segment-1-0">// Transform all .css files required somewhere within an entry point...</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement93">
loader: cssLoaders </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement94"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement94.$code-segment-1-0">// ...with normal css or PostCSS (if used)</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement95">
},
{
test: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement96"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement96.$code-segment-1-0">/.ttf(?v=d+.d+.d+)?$/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement97">,
loader: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement98"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement98.$code-segment-1-0">"url?limit=10000&mimetype=application/octet-stream"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement99">
},
{
test: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement100"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement100.$code-segment-1-0">/.(jpg|jpeg|gif|png)$/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement101">,
loader:</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement102"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement102.$code-segment-1-0">'url-loader?limit=10000'</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement103">,
exclude: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement104"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement104.$code-segment-1-0">/node_modules/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement105">
},
{
test: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement106"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement106.$code-segment-1-0">/.(eot|woff|woff2|svg)(?S*)?$/</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement107">,
loader: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement108"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement108.$code-segment-1-0">"file-loader?limit=10000&mimetype=image&name=[path][name].[ext]"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement109">
</span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement110"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement110.$code-segment-1-0">//don’t exclude node_modules since file loader takes .eot files from bootstrap in node_modules</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement111">
}]
},
plugins: plugins,
target: </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement112"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement112.$code-segment-1-0">"web"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement113">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement114"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement114.$code-segment-1-0">// Make web variables accessible to webpack, e.g. window</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement115">
stats: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement116"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement116.$code-segment-1-0">false</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement117">, </span><span style="color:#969896;font-style:italic;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement118"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement118.$code-segment-1-0">// Don’t show stats in the console</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement119">
progress: </span><span style="color:#cc99cc;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement120"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement120.$code-segment-1-0">true</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3u.0.$code-segement121">
}
}</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3v"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3v.0">I nearly forgot the </span><b data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3v.1">ES5 definitions</b><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3v.2"> we need to set. So let’s go ahead.</span></p><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3w"/><img src="/Blogolio/3d54e833ba00976d9f34c83a29c8b884.png" width="40%" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3x"/><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3y"/><br data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.3z"/><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.40"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.40.0">Create your own </span><b data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.40.1">.babelrc</b><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.40.2"> file in your project root and open it. Add the following content.</span></p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement0">{
</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement1"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement1.$code-segment-1-0">"presets"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement2">: [</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement3"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement3.$code-segment-1-0">"es2015"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement4">, </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement5"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement5.$code-segment-1-0">"stage-0"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement6">, </span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement7"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement7.$code-segment-1-0">"react"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement8">],
</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement9"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement9.$code-segment-1-0">"env"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement10">: {
</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement11"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement11.$code-segment-1-0">"development"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement12">: {
</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement13"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement13.$code-segment-1-0">"presets"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement14">: [</span><span style="color:#8abeb7;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement15"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement15.$code-segment-1-0">"react-hmre"</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.41.0.$code-segement16">]
}
}
}</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.42"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.42.0">To activate ES5 you have to specify it in the presets attribute. To allow hot module reloading features for ES6, ES7, or ES5 you also have to specify it in the development attribute. This is important. You can also specify those settings inside of your makeconfig.js file, but for testing purposes it is better to split presets into its own </span><b data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.42.1">.babelrc</b><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.42.2"> file.</span></p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.43">Since the defined attributes contain node_module dependencies you have to add them via npm install again.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0.$code-segement0">npm install babel-preset-es</span><span style="color:#f99157;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0.$code-segement1"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0.$code-segement1.$code-segment-1-0">2</span></span><span style="color:#f99157;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0.$code-segement2"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0.$code-segement2.$code-segment-1-0">0</span></span><span style="color:#f99157;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0.$code-segement3"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0.$code-segement3.$code-segment-1-0">1</span></span><span style="color:#f99157;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0.$code-segement4"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0.$code-segement4.$code-segment-1-0">5</span></span><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0.$code-segement5"> babel-preset-react babel-preset-react-hmre babel-preset-stage</span><span style="color:#f99157;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0.$code-segement6"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.44.0.$code-segement6.$code-segment-1-0">-0</span></span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.45">If everything is set up try to use the following command to start your development server.</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.46"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.46.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.46.0.$code-segement0">npm start</span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.47">Open your favourite browser and type in the following adress</p><pre style="display:block;overflow-x:auto;padding:0.5em;background:#474949;color:#d1d9e1;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.48"><code data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.48.0"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.48.0.$code-segement0">localhost:</span><span style="color:#f99157;" data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.48.0.$code-segement1"><span data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.48.0.$code-segement1.$code-segment-1-0">3000</span></span></code></pre><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.49">Since we do not have any react content yet, you will probably see a white screen at first. To be sure that everything went right, you can check your developer console for more information.</p><p data-reactid=".77grtj9j40.2.0.$=1$/Blogolio/reactTutPart1.0.1.4a">That’s all for the first part of this tutorial! I hope everything went fine for you and that you could keep up. The second part of this series will include the first steps for adding web content with react.</p></div></div></div></div><div id="sidebar-info" class="col-sm-3 col-sm-offset-1 blog-sidebar" data-reactid=".77grtj9j40.2.1"><div class="widget sidebar-module sidebar-module-inset" data-reactid=".77grtj9j40.2.1.0"><h2 class="widget-title" data-reactid=".77grtj9j40.2.1.0.0">About Timo Obereder</h2><div data-reactid=".77grtj9j40.2.1.0.1"><img class="me" src="/Blogolio/4a8380113927d6b45132b7ba89c10bcd.jpg" alt="Avatar Icon" data-reactid=".77grtj9j40.2.1.0.1.0"/><div data-reactid=".77grtj9j40.2.1.0.1.1"><p class="sidebar" data-reactid=".77grtj9j40.2.1.0.1.1.0"><em data-reactid=".77grtj9j40.2.1.0.1.1.0.0">Hi! My name is Timo and i'm a Software Developer with over 4 years of experience designing and developing mobile (mostly Android) as well as web applications. Follow me on Twitter </em><a class="gray" target="_blank" href="https://twitter.com/defuex" data-reactid=".77grtj9j40.2.1.0.1.1.0.1">here</a><span data-reactid=".77grtj9j40.2.1.0.1.1.0.2">.</span></p><br data-reactid=".77grtj9j40.2.1.0.1.1.1"/><p class="sidebar" data-reactid=".77grtj9j40.2.1.0.1.1.2">Banner art made by Panda (Contact artist at panda@grim.moe)</p></div></div></div><div class="sidebar-module" data-reactid=".77grtj9j40.2.1.1"><h4 data-reactid=".77grtj9j40.2.1.1.0">Archives</h4><ul class="list-unstyled" data-reactid=".77grtj9j40.2.1.1.1"><li class="gray" data-reactid=".77grtj9j40.2.1.1.1.0"><a href="#" data-reactid=".77grtj9j40.2.1.1.1.0.0">April 2016</a></li><li class="gray" data-reactid=".77grtj9j40.2.1.1.1.1"><a href="#" data-reactid=".77grtj9j40.2.1.1.1.1.0">March 2016</a></li></ul></div><div class="sidebar-module" data-reactid=".77grtj9j40.2.1.2"><h4 data-reactid=".77grtj9j40.2.1.2.0">Elsewhere</h4><ol class="list-unstyled" data-reactid=".77grtj9j40.2.1.2.1"><li data-reactid=".77grtj9j40.2.1.2.1.0"><a class="btn btn-social-icon btn-github" target="_blank" href="https://github.com/DeFuex" data-reactid=".77grtj9j40.2.1.2.1.0.0"><span class="fa fa-github" data-reactid=".77grtj9j40.2.1.2.1.0.0.0"></span></a></li><li data-reactid=".77grtj9j40.2.1.2.1.1"><a class="btn btn-social-icon btn-twitter" target="_blank" href="https://twitter.com/defuex" data-reactid=".77grtj9j40.2.1.2.1.1.0"><span class="fa fa-twitter" data-reactid=".77grtj9j40.2.1.2.1.1.0.0"></span></a></li><li data-reactid=".77grtj9j40.2.1.2.1.2"><a class="btn btn-social-icon btn-linkedin" target="_blank" href="https://at.linkedin.com/in/timo-obereder-11b65167" data-reactid=".77grtj9j40.2.1.2.1.2.0"><span class="fa fa-linkedin" data-reactid=".77grtj9j40.2.1.2.1.2.0.0"></span></a></li></ol></div></div></div><div data-reactid=".77grtj9j40.3"><footer class="blog-footer" data-reactid=".77grtj9j40.3.0"><p class="footer" data-reactid=".77grtj9j40.3.0.0">© 2016 Timo Obereder</p><p class="footer" data-reactid=".77grtj9j40.3.0.1"><a href="#" data-reactid=".77grtj9j40.3.0.1.0">Back to top</a></p></footer></div></div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/Blogolio/static/bundle.js"></script>
</body>
</html>