├── .gitignore
├── README.md
├── app.js
├── bundle.js
├── global.js
├── hello.js
├── index.html
├── logger.js
├── package.json
├── webpack-production.config.js
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Beginner's Guide to Webpack Repo
2 |
3 | > This tutorial uses Babel 6
4 |
5 | #### This goes along with the medium post [Beginner's Guide to Webpack](https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460)
6 |
7 | ##### To get started with this project, do the following:
8 |
9 | 1. Git clone the project
10 | 2. cd into the project
11 | 3. run 'npm install' from the terminal
12 | 4. install webpack and webpack-dev-server globally:
13 | ```
14 | npm install webpack-dev-server -g
15 | npm install webpack -g
16 | ```
17 |
18 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Hello from './hello';
3 |
4 | React.render(
5 | ,
6 | document.body
7 | );
--------------------------------------------------------------------------------
/global.js:
--------------------------------------------------------------------------------
1 | console.log('global.js is now loaded...');
--------------------------------------------------------------------------------
/hello.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default React.createClass({
4 | render: function() {
5 | return (
6 |
7 | Hello, {this.props.name}!
8 |
9 | );
10 | },
11 | });
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/logger.js:
--------------------------------------------------------------------------------
1 | let checkName= (firstName, lastName) => {
2 | if(firstName !== 'nader' || lastName !== 'dabit') {
3 | console.log('You are not Nader Dabit');
4 | } else {
5 | console.log('You are Nader Dabit');
6 | }
7 | }
8 |
9 | checkName('nader', 'jackson');
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpackguide",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "webpack-dev-server"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "babel-core": "^6.4.0",
13 | "babel-loader": "^6.2.1",
14 | "babel-preset-es2015": "^6.3.13",
15 | "babel-preset-react": "^6.3.13",
16 | "jshint": "^2.8.0",
17 | "jshint-loader": "^0.8.3",
18 | "node-libs-browser": "^0.5.2",
19 | "strip-loader": "^0.1.0",
20 | "webpack": "^1.12.1"
21 | },
22 | "dependencies": {
23 | "react": "^0.13.3"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/webpack-production.config.js:
--------------------------------------------------------------------------------
1 | var WebpackStripLoader = require('strip-loader');
2 | var devConfig = require('./webpack.config.js');
3 |
4 | var stripLoader = {
5 | test: [/\.js$/, /\.es6$/],
6 | exclude: /node_modules/,
7 | loader: WebpackStripLoader.loader('console.log')
8 | }
9 |
10 | devConfig.module.loaders.push(stripLoader);
11 |
12 | module.exports = devConfig;
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | entry: ["./global.js" , "./app.js"],
3 | output: {
4 | filename: "bundle.js"
5 | },
6 | module: {
7 |
8 | loaders: [
9 | {
10 | test: [/\.js$/, /\.es6$/],
11 | exclude: /node_modules/,
12 | loader: 'babel-loader',
13 | query: {
14 | presets: ['react', 'es2015']
15 | }
16 | }
17 | ]
18 | },
19 | resolve: {
20 | extensions: ['', '.js', '.es6']
21 | }
22 | }
--------------------------------------------------------------------------------