Tic-Tac-Toe with Javascript ES2015: Set up the project with webpack

Ali Alaa
Ali Alaa
Oct 12, 2017 · 5 min read
Image for post
Image for post

In this series of tutorials, you will learn how to create a simple tic-tac-toe game that never loses. We will use HTML/CSS(SASS) to build the UI, webpack to bundle javascript, compile SCSS and transpile the latest ES6 (ES2015) features to ES5 and the minimax algorithm to code the logic behind the computer player.

View a demo or visit the project’s github page.

Installing webpack

cd path/to/folder

Inside your directory in the terminal run:

npm init

npm init command will ask you a bunch of questions like projects name, description, version, etc.. It will also create package.json file for you. This file stores information about your project in addition to other npm dependencies. You can read more about it here.

We now have npm set up in our folder, it’s time to install webpack. Inside our folder directory we will install webpack V2 by running:

npm install webpack@2.2.0-rc.0 --save-dev

This command will install webpack in our folder and –save-dev will add webpack to the list of npm dependencies inside package.json file.

Next, add build command to your scripts property in package.json file, this allows you to run specific commands when typing npm run build. Currently we will set build to run webpack command. Our package.json file should look something like this:

{
"name": "tic-tac-toe",
"version": "1.0.0",
"description": "Tic Tac Toe implementation with Javascript ES2015",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"author": "themegasm",
"license": "ISC",
"devDependencies": {
"webpack": "^2.2.0-rc.0"
}
}

Configuring webpack

In the above code we specified an entry point called bundle, in webpack entry points uses relative paths, so ‘./src/index.js’ means we will create a folder in our root directory called src inside it a file called index.js. The output’s path however, will receive an absolute path, thus, we will use a nodejs global variable __dirname to get the absolute path to our folder on the device.

Additionally, we will require a node module called path which we will use to create a path that is the result of concatenation between the folder path and a folder we will call dist that will contain our compiled js code. So path.join(__dirname, 'dist') will result in an absolute path to a dist folder in our root directory compatible with both window and unix machines.

Finally, filename: '[name].js' is the name of the file that will contain our compiled js code in the dist folder, and [name] is a placeholder for the entry point name which is bundle in our case.

In our root folder, create a file called index.html. In this file we will import our compiled JS file:

To test our configuration, add alert(true) statement in src/index.js, then in the terminal type npm run build. This should run webpack which will create dist/bundle.js. By opening index.html in our browser, we should find the alert message.


Using Babel with webpack

To do that, first we will need to install babel-core and babel-loader, the first module is just babel’s core library while the latter connects babel core with webpack:

npm install --save-dev babel-loader babel-core

Secondly, in our webpack.config.js file, we will define a new rule which informs webpack to apply babel-loader to all js files except node_modules folder.

Finally, we need to let babel know which preset we want to use. There are a lot of presets available for our case we will install preset-env which includes all the latest js features:

npm install babel-preset-env --save-dev

In order to enable the preset we have to create a file called .babelrc in our root folder and then add the following:

{
"presets": ["env"]
}

Compiling SASS files

npm install --save-dev css-loader style-loader

You can then add a sass compiler to this pipeline using a third-party library called sass-loader. sass-loader will compile scss files before the other loaders come in. This loader requires node-sass to be installed:

npm install sass-loader node-sass --save-dev

In this approach, you may have noticed that we add styles in the HTML directly in an in-line manner. This might not be the best approach especially for large CSS chunks. To tackle this, webpack has a feature called plugins. Plugins can be used to perform some operations outside the webpack entry and output pipeline. In our case, we need the CSS loaders output to compile in a seperate file. To do this, we can use a plugin called extract-text-webpack-plugin. This plugin will take the output from a certain rule and save it into a separate file. The final webpack.config.js file will look like this:

npm install --save-dev extract-text-webpack-plugin@2.0.0-rc.3

First we import the plugin and define a new instance with the file name we want (style.css) in our case. Then we add the plugin instance to a plugins array property inside our exported object. Finally, we let the plugin know which loaders to use through extractSass.extract as you notice we no longer need the style-loader.

Finally, we will import the css file in the html file:


Using webpack development server

npm install webpack-dev-server --save-dev

In package.json, add a new script “serve”: “webpack-dev-server” so we can run npm run serve to launch our server:

"scripts": {     
"build": "webpack",
"serve": "webpack-dev-server"
}

Also webpack requires a property called publicPath that allows the server to know where our static files are. So to add this, open webpack.config.js and update the output object as follows:

Finally run npm run serve and you will be given a localhost url at a certain port that you can open in your browser and start developing.

All right, now that we have everything set to start coding, let’s start building our little game in the next part!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store