Template for bootstraping (and learning) a web app based on: react + redux + babel + webpack + browser-synch.
Note this project is work in progress and missing:
- testing
- CSS Framework (left out intentionally, but further studies should be done in this area)
For more information about learning react + redux, please refer to the document React-Redux.md
In order to start the project we will be using npm scripts:
npm install
npm start
npm run build
npm run build:watch
npm run build:prod
I'd preffer to not have to install webpack globally and have all the necessary dependencies stated in the package.json file. In this way, whenever the project is ported to another machine/VM/docker container, etc the project will be self sufficient to both: run in production mode and developer mode.
- src: source code of the project itself
- www: destination folder (static front-end)
.
├── README.md
├── package.json
├── src
│ ├── favico.ico
│ ├── index.ejs
│ ├── index.js
│ └── style
│ ├── main.scss
│ └── style.css
├── webpack.config.js
└── www
├── all.css
├── all.js
├── favico.ico
└── index.html
The best way to have an overall view is to check the package.json file, here below commented:
{
"dependencies": {
"webpack", // webpack (core library)
"path", // - tool: path resolving (@webpack.config.js)
"css-loader", // - loader: returns css code, resolves imports and url(...)
"sass-loader", // - loader: converts sass to css
"node-sass", // - dependecy: required by 'sass-loader'
"extract-text-webpack-plugin", // - plugin: no need to include extensions on require/import
"html-webpack-plugin" // - plugin: creates a new index.html
"react", // react (core library)
"react-dom", // - glue between react and DOM
"babel-core", // babel (core library)
"babel-loader", // - loader: so webpack can use babel
"babel-preset-es2015", // - preset: ECMA Script 2015 compatibility
"babel-preset-react", // - preset: for JSX compatibility
"browser-synch", // browser-synch (core library)
"browser-synch-webpack-plugin", // - plugin: so webpack can use browser-synch
}
}
NOTE: do not use the file above as package.json since strict JSON does not addmit comments.
used for:
- Bundle all js files into one ('all.js')
- Bundle all css/scss files into one ('all.css')
- Create index.html from an EJS template
- Run a developer server using browser-synch
Specify an entry point, and then webpack will calculate all the dependencies that this file requires (including css files: see loaders). Then specify an output point, where all the files will be bundled together to. See webpack.config.js here divided into parts:
var config = {
// NOT sure what this does??
debug: true,
// ENTRY point, in our case ./src/index.js
entry: [
path.resolve( __dirname, 'src/index')
],
// OUTPUT point, save all files into a dir "www" and bundle all JS code into "all.js"
output: {
path: path.resolve( __dirname, 'www'),
filename: 'all.js'
},
...
};
...
// Convert '.SCSS, .SASS, .CSS' files into '.CSS' and bundle
module: {
loaders: [
{ test: /\.(scss|sass|css)$/, loader: ExtractTextPlugin.extract('css!sass') },
]
},
...
...
// preset 'react': Convert '.JSX, .JS' files into '.JS' and bundle
// preset 'es2015': Convert ES6 to ES5
module: {
loaders: [
{ test: /\.(jsx|js)$/, loaders: ['babel'], exclude: /node_modules/ },
]
},
...
- html
// Creates an HTML page based on a .EJS template
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
...
plugins: [
new HtmlWebpackPlugin({
title: 'Project Title',
favicon: 'src/favico.ico',
template: 'src/index.ejs'
}),
...
]
...
};
- extract
// Moves all css files into one
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
...
plugins: [
new ExtractTextPlugin('all.css', {
allChunks: true
})
],
...
};
// Web server for testing the production build on multiple, synched windows (also diff devs)
// Note: see port 3001 for browsersynch options
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var config = {
...
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
server: { baseDir: ['www'] }
})
],
...
};
// Makes possible to used `require('file')` without the extension being specified
var config = {
...
resolve: {
extensions: ['', '.js', '.json', '.scss', '.css']
}
};
https://www.npmjs.com/package/image-webpack-loader
check image optimizations