├── .babelrc
├── src
├── assets
│ ├── scss
│ │ ├── _color.scss
│ │ └── app.scss
│ └── media
│ │ └── webpacklogo.png
├── app.js
└── index.html
├── .gitignore
├── package.json
├── LICENSE
├── README.md
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env"]
3 | }
4 |
--------------------------------------------------------------------------------
/src/assets/scss/_color.scss:
--------------------------------------------------------------------------------
1 | $bgcolor: #f3f3f3;
2 | $color: #050505;
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | import './assets/scss/app.scss';
2 | console.log('Its working just fine');
3 |
--------------------------------------------------------------------------------
/src/assets/scss/app.scss:
--------------------------------------------------------------------------------
1 | @import '_color';
2 | body {
3 | background: $bgcolor;
4 | color: $color;
5 | }
6 |
--------------------------------------------------------------------------------
/src/assets/media/webpacklogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arnirjhor/webpack-boilerplate/HEAD/src/assets/media/webpacklogo.png
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | ## System and generated files
2 | .idea
3 | .DS_Store
4 | .sass-cache
5 |
6 | ## Directories
7 | log/
8 | dist/
9 | node_modules/
10 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Webpack 3 Quickstarter
8 |
9 |
10 | Webpack 3 QuickStarter Template
11 | Inspect console to see javascript working!
12 | 
13 |
14 |
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "project_name2",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "build": "./node_modules/.bin/webpack",
8 | "build:prod": "./node_modules/.bin/webpack -p",
9 | "watch": "./node_modules/.bin/webpack --watch",
10 | "dev": "./node_modules/.bin/webpack-dev-server"
11 | },
12 | "keywords": [],
13 | "author": "",
14 | "license": "ISC",
15 | "devDependencies": {
16 | "babel-core": "~6.26.0",
17 | "babel-loader": "~7.1.2",
18 | "babel-preset-env": "~1.6.0",
19 | "clean-webpack-plugin": "~0.1.17",
20 | "css-loader": "~0.28.7",
21 | "extract-text-webpack-plugin": "~3.0.0",
22 | "file-loader": "~1.1.4",
23 | "html-loader": "~0.5.1",
24 | "html-webpack-plugin": "~2.30.1",
25 | "node-sass": "~4.5.3",
26 | "sass-loader": "~6.0.6",
27 | "style-loader": "~0.18.2",
28 | "webpack": "~3.6.0",
29 | "webpack-dev-server": "~2.9.1"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Atiqur Rahman
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Webpack 3 Boilerplate for beginners
2 | A basic webpack 3 boilerplate for beginners to start with any JS/ES6 based project.
3 |
4 | ## Guide
5 | This basic boilerplate is the final output of this comprehensive write up on Medium. I recommend to read this article to know the insight of how you can configure webpack from scratch.
6 | [Webpack 3 quickstarter: Configure webpack from scratch](https://medium.com/@nirjhor123/webpack-3-quickstarter-configure-webpack-from-scratch-30a6c394038a)
7 |
8 | ## Install dependencies
9 |
10 | ```
11 | npm install
12 | ```
13 |
14 |
15 | ## Develop locally with webpack-dev-server
16 | 1. Run
17 |
18 | ```
19 | npm run dev
20 | ```
21 |
22 | 2. In your browser, navigate to: [http://localhost:2000/](http://localhost:2000/)
23 | ## For bundled output
24 |
25 | ```
26 | npm run build
27 | ```
28 |
29 | ## For production-ready output
30 |
31 | ```
32 | npm run build:prod
33 | ```
34 |
35 | ## Loaders and Plugins used in this boilerplate
36 |
37 | ### Loaders
38 | * babel-loader
39 | * html-loader
40 | * sass-loader
41 | * css-loader
42 | * style-loader
43 | * file-loader
44 |
45 | ### Plugins
46 | * clean-webpack-plugin
47 | * extract-text-webpack-plugin
48 | * html-webpack-plugin
49 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path'),
2 | webpack = require('webpack'),
3 | CleanWebpackPlugin = require('clean-webpack-plugin'),
4 | HtmlWebpackPlugin = require('html-webpack-plugin'),
5 | ExtractTextPlugin = require('extract-text-webpack-plugin');
6 |
7 | const extractPlugin = new ExtractTextPlugin({ filename: './assets/css/app.css' });
8 |
9 | const config = {
10 |
11 | // absolute path for project root
12 | context: path.resolve(__dirname, 'src'),
13 |
14 | entry: {
15 | // relative path declaration
16 | app: './app.js'
17 | },
18 |
19 | output: {
20 | // absolute path declaration
21 | path: path.resolve(__dirname, 'dist'),
22 | filename: './assets/js/[name].bundle.js'
23 | },
24 |
25 | module: {
26 | rules: [
27 |
28 | // babel-loader with 'env' preset
29 | { test: /\.js$/, include: /src/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['env'] } } },
30 | // html-loader
31 | { test: /\.html$/, use: ['html-loader'] },
32 | // sass-loader with sourceMap activated
33 | {
34 | test: /\.scss$/,
35 | include: [path.resolve(__dirname, 'src', 'assets', 'scss')],
36 | use: extractPlugin.extract({
37 | use: [
38 | {
39 | loader: 'css-loader',
40 | options: {
41 | sourceMap: true
42 | }
43 | },
44 | {
45 | loader: 'sass-loader',
46 | options: {
47 | sourceMap: true
48 | }
49 | }
50 | ],
51 | fallback: 'style-loader'
52 | })
53 | },
54 | // file-loader(for images)
55 | { test: /\.(jpg|png|gif|svg)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './assets/media/' } } ] },
56 | // file-loader(for fonts)
57 | { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }
58 |
59 | ]
60 | },
61 |
62 | plugins: [
63 | // cleaning up only 'dist' folder
64 | new CleanWebpackPlugin(['dist']),
65 | new HtmlWebpackPlugin({
66 | template: 'index.html'
67 | }),
68 | // extract-text-webpack-plugin instance
69 | extractPlugin
70 | ],
71 |
72 | devServer: {
73 | // static files served from here
74 | contentBase: path.resolve(__dirname, "./dist/assets/media"),
75 | compress: true,
76 | // open app in localhost:2000
77 | port: 2000,
78 | stats: 'errors-only',
79 | open: true
80 | },
81 |
82 | devtool: 'inline-source-map'
83 |
84 | };
85 |
86 | module.exports = config;
87 |
--------------------------------------------------------------------------------