├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── purgecss.config.js
├── src
    ├── another-page.html
    ├── index.html
    ├── js
    │   └── index.js
    ├── public
    │   ├── icon.ico
    │   └── images
    │   │   ├── image_1.jpg
    │   │   ├── image_2.jpg
    │   │   └── image_3.jpg
    └── scss
    │   ├── carousel.css
    │   ├── custom.scss
    │   └── index.scss
├── webpack.config.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "@babel/preset-env",
 5 |       {
 6 |         "targets": {
 7 |           "browsers": ["last 2 versions", "safari >= 7"]
 8 |         }
 9 |       }
10 |     ]
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | end_of_line = lf
 6 | charset = utf-8
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | indent_size = 2
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "extends": ["eslint:recommended", "prettier", "plugin:no-jquery/deprecated-3.5"],
 4 |   "globals": {
 5 |     "chrome": true
 6 |   },
 7 |   "env": {
 8 |     "browser": true,
 9 |     "node": true,
10 |     "jquery": true
11 |   },
12 |   "rules": {
13 |     "prettier/prettier": [
14 |       "error",
15 |       {
16 |         "trailingComma": "es5",
17 |         "singleQuote": true
18 |       }
19 |     ],
20 |     "no-console": "off"
21 |   },
22 |   "plugins": ["no-jquery", "babel", "prettier"]
23 | }
24 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Node.js related files
2 | node_modules/
3 | dist/
4 | package-lock.json
5 | 
6 | # OS generated files
7 | .DS_Store
8 | .Trashes
9 | Thumbs.db


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 - present Homer Chen
 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 | # Boostrap + Webpack + JQuery Boilerplate
 2 | 
 3 | > Build landing page with **Boostrap** and **jQuery** is so easy.
 4 | 
 5 | <a target="_blank" href="https://opensource.org/licenses/MIT" title="License: MIT">
 6 |   <img src="https://img.shields.io/badge/License-MIT-blue.svg">
 7 | </a>
 8 | <a href="#badge">
 9 |   <img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg">
10 | </a>
11 | <a target="_blank" href="http://makeapullrequest.com" title="PRs Welcome"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
12 | 
13 | ## Why ?
14 | 
15 | React is awesome, and I use it everyday.
16 | 
17 | However, not each project needs such a complicated library. jQuery and bootstrap are good enough.
18 | 
19 | Hence, this repo is suitable for simple projects.
20 | 
21 | ## About DOM manipulation, all you need is...
22 | 
23 | #### 🤩 jQuery
24 | 
25 | #### ❌ No React
26 | 
27 | #### ❌ No Vue
28 | 
29 | #### ❌ No Angular
30 | 
31 | ## About CSS, all you need is...
32 | 
33 | #### 🤩 Bootstrap + CSS
34 | 
35 | #### ❌ No CSS Modules
36 | 
37 | #### ❌ No styled-components
38 | 
39 | ## Features
40 | 
41 | - **Bootstrap** and **jQuery** installed
42 | - Hot Module Replacement (**HMR**)
43 | - Support **ES6** Syntax (**Babel 7**)
44 | - **ESLint** + **Prettier** = **Neat Coding Style**
45 | - Webpack production building (**code splitting**, **cache**, **lazy-loading** and [**Terser**](https://github.com/terser-js/terser))
46 | 
47 | ## Download and Install
48 | 
49 | Let's go!
50 | 
51 | ```
52 | $ git clone https://github.com/xxhomey19/bootstrap-webpack-jquery-boilerplate.git
53 | $ cd bootstrap-webpack-jquery-boilerplate
54 | $ yarn // or npm install
55 | ```
56 | 
57 | ## Development
58 | 
59 | Run development page on **localhost:8080**
60 | 
61 | ```
62 | $ npm run dev
63 | ```
64 | 
65 | ## Build
66 | 
67 | Build for production.
68 | 
69 | ```
70 | $ npm run build
71 | ```
72 | 
73 | ## Deploy
74 | 
75 | Deploy to `gh-pages` branch on GitHub.
76 | 
77 | **[DEMO](https://xxhomey19.github.io/bootstrap-webpack-jquery-boilerplate/)**
78 | 
79 | ```
80 | $ npm run deploy
81 | ```
82 | 
83 | ## License
84 | 
85 | MIT © [xxhomey19](https://github.com/xxhomey19)
86 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bootstrap-webpack-jquery-boilerplate",
 3 |   "license": "MIT",
 4 |   "author": "xxhomey19",
 5 |   "homepage": "https://xxhomey19.github.io/bootstrap-webpack-jquery-boilerplate/",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/xxhomey19/bootstrap-webpack-jquery-boilerplate/tree/master"
 9 |   },
10 |   "bugs": {
11 |     "url": "https://github.com/xxhomey19/bootstrap-webpack-jquery-boilerplate/issues"
12 |   },
13 |   "version": "1.6.4",
14 |   "scripts": {
15 |     "build": "webpack -p --progress --mode production --config webpack.config.js",
16 |     "predeploy": "npm run build && npm run purge",
17 |     "deploy": "gh-pages -d dist",
18 |     "dev": "cross-env NODE_ENV=dev webpack-dev-server --open --config webpack.config.js",
19 |     "lint": "eslint src/js",
20 |     "lint:fix": "npm run lint -- --fix",
21 |     "purge": "purgecss --config purgecss.config.js --output dist/css",
22 |     "start": "npm run dev"
23 |   },
24 |   "dependencies": {
25 |     "bootstrap": "^4.3.1",
26 |     "jquery": "^3.5.1",
27 |     "popper.js": "^1.15.0"
28 |   },
29 |   "devDependencies": {
30 |     "@babel/core": "^7.4.5",
31 |     "@babel/preset-env": "^7.4.5",
32 |     "babel-eslint": "^10.0.2",
33 |     "babel-loader": "^8.0.6",
34 |     "clean-webpack-plugin": "^3.0.0",
35 |     "copy-webpack-plugin": "^5.0.3",
36 |     "cross-env": "^5.2.0",
37 |     "css-loader": "^3.0.0",
38 |     "css-url-relative-plugin": "^1.0.0",
39 |     "eslint": "^6.0.1",
40 |     "eslint-config-prettier": "^6.0.0",
41 |     "eslint-plugin-babel": "^5.3.0",
42 |     "eslint-plugin-import": "^2.18.0",
43 |     "eslint-plugin-jsx-a11y": "^6.2.1",
44 |     "eslint-plugin-no-jquery": "^2.4.1",
45 |     "eslint-plugin-prettier": "^3.1.0",
46 |     "eslint-plugin-react": "^7.14.2",
47 |     "file-loader": "^4.0.0",
48 |     "gh-pages": "^2.0.1",
49 |     "glob": "^7.1.4",
50 |     "html-webpack-plugin": "^4.0.0-beta.5",
51 |     "husky": "^2.7.0",
52 |     "image-webpack-loader": "^5.0.0",
53 |     "lint-staged": "^8.2.1",
54 |     "mini-css-extract-plugin": "^0.7.0",
55 |     "node-sass": "^4.12.0",
56 |     "optimize-css-assets-webpack-plugin": "^5.0.3",
57 |     "preload-webpack-plugin": "^3.0.0-beta.3",
58 |     "prettier": "^1.18.2",
59 |     "prettier-package-json": "^2.1.0",
60 |     "purgecss": "^3.0.0",
61 |     "sass-loader": "^7.1.0",
62 |     "terser-webpack-plugin": "^1.3.0",
63 |     "url-loader": "^2.0.1",
64 |     "webpack": "^4.35.0",
65 |     "webpack-cli": "^3.3.5",
66 |     "webpack-dev-server": "^3.7.2"
67 |   },
68 |   "husky": {
69 |     "hooks": {
70 |       "pre-commit": "lint-staged"
71 |     }
72 |   },
73 |   "lint-staged": {
74 |     "package.json": [
75 |       "prettier-package-json --write",
76 |       "git add"
77 |     ],
78 |     "*.js": [
79 |       "eslint --fix",
80 |       "git add"
81 |     ]
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/purgecss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   content: ['dist/**/*.html', 'dist/js/**/*.js'],
3 |   css: ['dist/css/**/*.css'],
4 | };
5 | 


--------------------------------------------------------------------------------
/src/another-page.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 8 |     />
 9 |     <meta name="description" content="" />
10 |     <meta name="author" content="" />
11 | 
12 |     <title>Another page</title>
13 |   </head>
14 | 
15 |   <body>
16 |     <header>
17 |       <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
18 |         <a class="navbar-brand" href="./index.html">Carousel</a>
19 |         <button
20 |           class="navbar-toggler"
21 |           type="button"
22 |           data-toggle="collapse"
23 |           data-target="#navbarCollapse"
24 |           aria-controls="navbarCollapse"
25 |           aria-expanded="false"
26 |           aria-label="Toggle navigation"
27 |         >
28 |           <span class="navbar-toggler-icon"></span>
29 |         </button>
30 |         <div class="collapse navbar-collapse" id="navbarCollapse">
31 |           <ul class="navbar-nav mr-auto">
32 |             <li class="nav-item">
33 |               <a class="nav-link" href="./index.html">Home</a>
34 |             </li>
35 |             <li class="nav-item active">
36 |               <a class="nav-link" href="./another-page.html">Another page <span class="sr-only">(current)</span></a>
37 |             </li>
38 |             <li class="nav-item">
39 |               <a id="alert" class="nav-link" href="#">Alert</a>
40 |             </li>
41 |             <li class="nav-item">
42 |               <a class="nav-link disabled" href="#">Disabled</a>
43 |             </li>
44 |           </ul>
45 |           <form class="form-inline mt-2 mt-md-0">
46 |             <input
47 |               class="form-control mr-sm-2"
48 |               type="text"
49 |               placeholder="Search"
50 |               aria-label="Search"
51 |             />
52 |             <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
53 |               Search
54 |             </button>
55 |           </form>
56 |         </div>
57 |       </nav>
58 |     </header>
59 | 
60 |     <main role="main">
61 |       <div class="jumbotron">
62 |         <h1>This is another page</h1>
63 |       </div>
64 |       <!-- FOOTER -->
65 |       <footer class="container">
66 |         <p class="float-right"><a href="#">Back to top</a></p>
67 |         <p>
68 |           &copy; 2017-2018 Company, Inc. &middot;
69 |           <a href="#">Privacy</a> &middot; <a href="#">Terms</a>
70 |         </p>
71 |       </footer>
72 |     </main>
73 |   </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta
  6 |       name="viewport"
  7 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
  8 |     />
  9 |     <meta name="description" content="" />
 10 |     <meta name="author" content="" />
 11 | 
 12 |     <title>Carousel Template for Bootstrap</title>
 13 |   </head>
 14 | 
 15 |   <body>
 16 |     <header>
 17 |       <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
 18 |         <a class="navbar-brand" href="./index.html">Carousel</a>
 19 |         <button
 20 |           class="navbar-toggler"
 21 |           type="button"
 22 |           data-toggle="collapse"
 23 |           data-target="#navbarCollapse"
 24 |           aria-controls="navbarCollapse"
 25 |           aria-expanded="false"
 26 |           aria-label="Toggle navigation"
 27 |         >
 28 |           <span class="navbar-toggler-icon"></span>
 29 |         </button>
 30 |         <div class="collapse navbar-collapse" id="navbarCollapse">
 31 |           <ul class="navbar-nav mr-auto">
 32 |             <li class="nav-item active">
 33 |               <a class="nav-link" href="./index.html">Home <span class="sr-only">(current)</span></a>
 34 |             </li>
 35 |             <li class="nav-item">
 36 |               <a class="nav-link" href="./another-page.html">Another page</a>
 37 |             </li>
 38 |             <li class="nav-item">
 39 |               <a id="alert" class="nav-link" href="#">Alert</a>
 40 |             </li>
 41 |             <li class="nav-item">
 42 |               <a class="nav-link disabled" href="#">Disabled</a>
 43 |             </li>
 44 |           </ul>
 45 |           <form class="form-inline mt-2 mt-md-0">
 46 |             <input
 47 |               class="form-control mr-sm-2"
 48 |               type="text"
 49 |               placeholder="Search"
 50 |               aria-label="Search"
 51 |             />
 52 |             <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
 53 |               Search
 54 |             </button>
 55 |           </form>
 56 |         </div>
 57 |       </nav>
 58 |     </header>
 59 | 
 60 |     <main role="main">
 61 |       <div id="myCarousel" class="carousel slide" data-ride="carousel">
 62 |         <ol class="carousel-indicators">
 63 |           <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 64 |           <li data-target="#myCarousel" data-slide-to="1"></li>
 65 |           <li data-target="#myCarousel" data-slide-to="2"></li>
 66 |         </ol>
 67 |         <div class="carousel-inner">
 68 |           <div class="carousel-item active">
 69 |             <img
 70 |               class="first-slide"
 71 |               alt="First slide"
 72 |               src="./public/images/image_1.jpg"
 73 |             />
 74 |             <div class="container">
 75 |               <div class="carousel-caption text-left">
 76 |                 <h1>Example headline.</h1>
 77 |                 <p>
 78 |                   Cras justo odio, dapibus ac facilisis in, egestas eget quam.
 79 |                   Donec id elit non mi porta gravida at eget metus. Nullam id
 80 |                   dolor id nibh ultricies vehicula ut id elit.
 81 |                 </p>
 82 |                 <p>
 83 |                   <a class="btn btn-lg btn-primary" href="#" role="button"
 84 |                     >Sign up today</a
 85 |                   >
 86 |                 </p>
 87 |               </div>
 88 |             </div>
 89 |           </div>
 90 |           <div class="carousel-item">
 91 |             <img
 92 |               class="second-slide"
 93 |               alt="Second slide"
 94 |               src="./public/images/image_2.jpg"
 95 |             />
 96 |             <div class="container">
 97 |               <div class="carousel-caption">
 98 |                 <h1>Another example headline.</h1>
 99 |                 <p>
100 |                   Cras justo odio, dapibus ac facilisis in, egestas eget quam.
101 |                   Donec id elit non mi porta gravida at eget metus. Nullam id
102 |                   dolor id nibh ultricies vehicula ut id elit.
103 |                 </p>
104 |                 <p>
105 |                   <a class="btn btn-lg btn-primary" href="#" role="button"
106 |                     >Learn more</a
107 |                   >
108 |                 </p>
109 |               </div>
110 |             </div>
111 |           </div>
112 |           <div class="carousel-item">
113 |             <img
114 |               class="third-slide"
115 |               alt="Third slide"
116 |               src="./public/images/image_3.jpg"
117 |             />
118 |             <div class="container">
119 |               <div class="carousel-caption text-right">
120 |                 <h1>One more for good measure.</h1>
121 |                 <p>
122 |                   Cras justo odio, dapibus ac facilisis in, egestas eget quam.
123 |                   Donec id elit non mi porta gravida at eget metus. Nullam id
124 |                   dolor id nibh ultricies vehicula ut id elit.
125 |                 </p>
126 |                 <p>
127 |                   <a class="btn btn-lg btn-primary" href="#" role="button"
128 |                     >Browse gallery</a
129 |                   >
130 |                 </p>
131 |               </div>
132 |             </div>
133 |           </div>
134 |         </div>
135 |         <a
136 |           class="carousel-control-prev"
137 |           href="#myCarousel"
138 |           role="button"
139 |           data-slide="prev"
140 |         >
141 |           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
142 |           <span class="sr-only">Previous</span>
143 |         </a>
144 |         <a
145 |           class="carousel-control-next"
146 |           href="#myCarousel"
147 |           role="button"
148 |           data-slide="next"
149 |         >
150 |           <span class="carousel-control-next-icon" aria-hidden="true"></span>
151 |           <span class="sr-only">Next</span>
152 |         </a>
153 |       </div>
154 | 
155 |       <!--
156 |         Marketing messaging and featurettes
157 |         ==================================================
158 |       -->
159 |       <!--
160 |         Wrap the rest of the page in another container to center all the content.
161 |       -->
162 | 
163 |       <div class="container marketing">
164 |         <!-- Three columns of text below the carousel -->
165 |         <div class="row">
166 |           <div class="col-lg-4">
167 |             <img
168 |               class="rounded-circle"
169 |               src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
170 |               alt="Generic placeholder image"
171 |               width="140"
172 |               height="140"
173 |             />
174 |             <h2>Heading</h2>
175 |             <p>
176 |               Donec sed odio dui. Etiam porta sem malesuada magna mollis
177 |               euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.
178 |               Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
179 |               Praesent commodo cursus magna.
180 |             </p>
181 |             <p>
182 |               <a class="btn btn-secondary" href="#" role="button"
183 |                 >View details &raquo;</a
184 |               >
185 |             </p>
186 |           </div>
187 |           <!-- /.col-lg-4 -->
188 |           <div class="col-lg-4">
189 |             <img
190 |               class="rounded-circle"
191 |               src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
192 |               alt="Generic placeholder image"
193 |               width="140"
194 |               height="140"
195 |             />
196 |             <h2>Heading</h2>
197 |             <p>
198 |               Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
199 |               eget lacinia odio sem nec elit. Cras mattis consectetur purus sit
200 |               amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor
201 |               mauris condimentum nibh.
202 |             </p>
203 |             <p>
204 |               <a class="btn btn-secondary" href="#" role="button"
205 |                 >View details &raquo;</a
206 |               >
207 |             </p>
208 |           </div>
209 |           <!-- /.col-lg-4 -->
210 |           <div class="col-lg-4">
211 |             <img
212 |               class="rounded-circle"
213 |               src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
214 |               alt="Generic placeholder image"
215 |               width="140"
216 |               height="140"
217 |             />
218 |             <h2>Heading</h2>
219 |             <p>
220 |               Donec sed odio dui. Cras justo odio, dapibus ac facilisis in,
221 |               egestas eget quam. Vestibulum id ligula porta felis euismod
222 |               semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris
223 |               condimentum nibh, ut fermentum massa justo sit amet risus.
224 |             </p>
225 |             <p>
226 |               <a class="btn btn-secondary" href="#" role="button"
227 |                 >View details &raquo;</a
228 |               >
229 |             </p>
230 |           </div>
231 |           <!-- /.col-lg-4 -->
232 |         </div>
233 |         <!-- /.row -->
234 | 
235 |         <!-- START THE FEATURETTES -->
236 | 
237 |         <hr class="featurette-divider" />
238 | 
239 |         <div class="row featurette">
240 |           <div class="col-md-7">
241 |             <h2 class="featurette-heading">
242 |               First featurette heading.
243 |               <span class="text-muted">It'll blow your mind.</span>
244 |             </h2>
245 |             <p class="lead">
246 |               Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id
247 |               ligula porta felis euismod semper. Praesent commodo cursus magna,
248 |               vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus
249 |               commodo.
250 |             </p>
251 |           </div>
252 |           <div class="col-md-5">
253 |             <img
254 |               class="featurette-image img-fluid mx-auto"
255 |               src="http://via.placeholder.com/500x500"
256 |               alt="Generic placeholder image"
257 |             />
258 |           </div>
259 |         </div>
260 | 
261 |         <hr class="featurette-divider" />
262 | 
263 |         <div class="row featurette">
264 |           <div class="col-md-7 order-md-2">
265 |             <h2 class="featurette-heading">
266 |               Oh yeah, it's that good.
267 |               <span class="text-muted">See for yourself.</span>
268 |             </h2>
269 |             <p class="lead">
270 |               Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id
271 |               ligula porta felis euismod semper. Praesent commodo cursus magna,
272 |               vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus
273 |               commodo.
274 |             </p>
275 |           </div>
276 |           <div class="col-md-5 order-md-1">
277 |             <img
278 |               class="featurette-image img-fluid mx-auto"
279 |               src="http://via.placeholder.com/500x500"
280 |               alt="Generic placeholder image"
281 |             />
282 |           </div>
283 |         </div>
284 | 
285 |         <hr class="featurette-divider" />
286 | 
287 |         <div class="row featurette">
288 |           <div class="col-md-7">
289 |             <h2 class="featurette-heading">
290 |               And lastly, this one. <span class="text-muted">Checkmate.</span>
291 |             </h2>
292 |             <p class="lead">
293 |               Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id
294 |               ligula porta felis euismod semper. Praesent commodo cursus magna,
295 |               vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus
296 |               commodo.
297 |             </p>
298 |           </div>
299 |           <div class="col-md-5">
300 |             <img
301 |               class="featurette-image img-fluid mx-auto"
302 |               src="http://via.placeholder.com/500x500"
303 |               alt="Generic placeholder image"
304 |             />
305 |           </div>
306 |         </div>
307 | 
308 |         <hr class="featurette-divider" />
309 | 
310 |         <!-- /END THE FEATURETTES -->
311 |       </div>
312 |       <!-- /.container -->
313 | 
314 |       <!-- FOOTER -->
315 |       <footer class="container">
316 |         <p class="float-right"><a href="#">Back to top</a></p>
317 |         <p>
318 |           &copy; 2017-2018 Company, Inc. &middot;
319 |           <a href="#">Privacy</a> &middot; <a href="#">Terms</a>
320 |         </p>
321 |       </footer>
322 |     </main>
323 |   </body>
324 | </html>
325 | 


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
 1 | import 'bootstrap';
 2 | 
 3 | import '../scss/index.scss';
 4 | 
 5 | $('#alert').on('click', () => {
 6 |   alert('jQuery works!');
 7 | });
 8 | 
 9 | // Your jQuery code
10 | 


--------------------------------------------------------------------------------
/src/public/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/homerchen19/bootstrap-webpack-jquery-boilerplate/505796277391e863afab58b6570fe88ad04c5646/src/public/icon.ico


--------------------------------------------------------------------------------
/src/public/images/image_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/homerchen19/bootstrap-webpack-jquery-boilerplate/505796277391e863afab58b6570fe88ad04c5646/src/public/images/image_1.jpg


--------------------------------------------------------------------------------
/src/public/images/image_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/homerchen19/bootstrap-webpack-jquery-boilerplate/505796277391e863afab58b6570fe88ad04c5646/src/public/images/image_2.jpg


--------------------------------------------------------------------------------
/src/public/images/image_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/homerchen19/bootstrap-webpack-jquery-boilerplate/505796277391e863afab58b6570fe88ad04c5646/src/public/images/image_3.jpg


--------------------------------------------------------------------------------
/src/scss/carousel.css:
--------------------------------------------------------------------------------
 1 | /* GLOBAL STYLES
 2 | -------------------------------------------------- */
 3 | /* Padding below the footer and lighter body text */
 4 | 
 5 | body {
 6 |   padding-top: 3rem;
 7 |   padding-bottom: 3rem;
 8 |   color: #5a5a5a;
 9 | }
10 | 
11 | /* CUSTOMIZE THE CAROUSEL
12 | -------------------------------------------------- */
13 | 
14 | /* Carousel base class */
15 | .carousel {
16 |   margin-bottom: 4rem;
17 | }
18 | /* Since positioning the image, we need to help out the caption */
19 | .carousel-caption {
20 |   bottom: 3rem;
21 |   z-index: 10;
22 | }
23 | 
24 | /* Declare heights because of positioning of img element */
25 | .carousel-item {
26 |   height: 32rem;
27 |   background-color: #777;
28 | }
29 | .carousel-item > img {
30 |   position: absolute;
31 |   top: 0;
32 |   left: 0;
33 |   min-width: 100%;
34 |   height: 32rem;
35 |   object-fit: cover;
36 | }
37 | 
38 | /* MARKETING CONTENT
39 | -------------------------------------------------- */
40 | 
41 | /* Center align the text within the three columns below the carousel */
42 | .marketing .col-lg-4 {
43 |   margin-bottom: 1.5rem;
44 |   text-align: center;
45 | }
46 | .marketing h2 {
47 |   font-weight: 400;
48 | }
49 | .marketing .col-lg-4 p {
50 |   margin-right: 0.75rem;
51 |   margin-left: 0.75rem;
52 | }
53 | 
54 | /* Featurettes
55 | ------------------------- */
56 | 
57 | .featurette-divider {
58 |   margin: 5rem 0; /* Space out the Bootstrap <hr> more */
59 | }
60 | 
61 | /* Thin out the marketing headings */
62 | .featurette-heading {
63 |   font-weight: 300;
64 |   line-height: 1;
65 |   letter-spacing: -0.05rem;
66 | }
67 | 
68 | /* RESPONSIVE CSS
69 | -------------------------------------------------- */
70 | 
71 | @media (min-width: 40em) {
72 |   /* Bump up size of carousel content */
73 |   .carousel-caption p {
74 |     margin-bottom: 1.25rem;
75 |     font-size: 1.25rem;
76 |     line-height: 1.4;
77 |   }
78 | 
79 |   .featurette-heading {
80 |     font-size: 50px;
81 |   }
82 | }
83 | 
84 | @media (min-width: 62em) {
85 |   .featurette-heading {
86 |     margin-top: 7rem;
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/src/scss/custom.scss:
--------------------------------------------------------------------------------
1 | @import './carousel.css';
2 | 
3 | // Your customize CSS
4 | 


--------------------------------------------------------------------------------
/src/scss/index.scss:
--------------------------------------------------------------------------------
1 | @import '../../node_modules/bootstrap/scss/bootstrap';
2 | @import './custom.scss';
3 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | const webpack = require('webpack');
  3 | const HtmlWebPackPlugin = require('html-webpack-plugin');
  4 | const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  5 | const CopyWebpackPlugin = require('copy-webpack-plugin');
  6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  7 | const PreloadWebpackPlugin = require('preload-webpack-plugin');
  8 | const CssUrlRelativePlugin = require('css-url-relative-plugin');
  9 | const glob = require('glob');
 10 | 
 11 | const IS_DEV = process.env.NODE_ENV === 'dev';
 12 | 
 13 | const config = {
 14 |   mode: IS_DEV ? 'development' : 'production',
 15 |   devtool: IS_DEV ? 'eval' : 'source-map',
 16 |   entry: './src/js/index.js',
 17 |   output: {
 18 |     filename: 'js/[name].[hash].js',
 19 |     path: path.resolve(__dirname, 'dist'),
 20 |   },
 21 |   module: {
 22 |     rules: [
 23 |       {
 24 |         test: /\.js$/,
 25 |         exclude: /node_modules/,
 26 |         loader: 'babel-loader',
 27 |       },
 28 |       {
 29 |         test: /\.scss$/,
 30 |         use: [
 31 |           {
 32 |             loader: MiniCssExtractPlugin.loader,
 33 |             options: {
 34 |               hmr: IS_DEV,
 35 |             },
 36 |           },
 37 |           'css-loader',
 38 |           'sass-loader',
 39 |         ],
 40 |       },
 41 |       {
 42 |         test: /\.(gif|png|jpe?g|svg)$/i,
 43 |         use: [
 44 |           {
 45 |             loader: 'url-loader',
 46 |             options: {
 47 |               limit: 8192,
 48 |               name: '[name].[ext]',
 49 |               fallback: 'file-loader',
 50 |               outputPath: 'public/images',
 51 |             },
 52 |           },
 53 |           {
 54 |             loader: 'image-webpack-loader',
 55 |             options: {
 56 |               mozjpeg: {
 57 |                 progressive: true,
 58 |                 quality: 65,
 59 |               },
 60 |               pngquant: {
 61 |                 quality: '65-90',
 62 |                 speed: 4,
 63 |               },
 64 |               gifsicle: {
 65 |                 interlaced: false,
 66 |               },
 67 |               webp: {
 68 |                 quality: 75,
 69 |               },
 70 |             },
 71 |           },
 72 |         ],
 73 |       },
 74 |     ],
 75 |   },
 76 |   plugins: [
 77 |     new CleanWebpackPlugin(),
 78 |     new webpack.ProvidePlugin({
 79 |       $: 'jquery',
 80 |       jQuery: 'jquery',
 81 |       'window.jQuery': 'jquery',
 82 |     }),
 83 |     new CopyWebpackPlugin([
 84 |       {
 85 |         from: './src/public',
 86 |         to: 'public',
 87 |       },
 88 |     ]),
 89 |     new MiniCssExtractPlugin({
 90 |       filename: IS_DEV ? 'css/[name].css' : 'css/[name].[contenthash].css',
 91 |       chunkFilename: 'css/[id].css',
 92 |     }),
 93 |     new webpack.HashedModuleIdsPlugin(),
 94 |     new PreloadWebpackPlugin({
 95 |       include: 'initial',
 96 |     }),
 97 |     new CssUrlRelativePlugin(),
 98 |   ],
 99 |   devServer: {
100 |     contentBase: path.join(__dirname, 'src'),
101 |   },
102 |   optimization: {
103 |     runtimeChunk: 'single',
104 |     splitChunks: {
105 |       cacheGroups: {
106 |         vendor: {
107 |           test: /node_modules/,
108 |           chunks: 'initial',
109 |           name: 'vendor',
110 |           priority: 10,
111 |           enforce: true,
112 |         },
113 |       },
114 |     },
115 |     minimizer: [],
116 |   },
117 | };
118 | 
119 | if (!IS_DEV) {
120 |   const TerserPlugin = require('terser-webpack-plugin');
121 |   const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
122 | 
123 |   config.optimization.minimizer.push(
124 |     new TerserPlugin(),
125 |     new OptimizeCSSAssetsPlugin({})
126 |   );
127 | }
128 | 
129 | const files = glob.sync('./src/*.html');
130 | 
131 | files.forEach(file => {
132 |   config.plugins.push(
133 |     new HtmlWebPackPlugin({
134 |       filename: path.basename(file),
135 |       template: file,
136 |       favicon: path.resolve(__dirname, './src/public/icon.ico'),
137 |       minify: !IS_DEV,
138 |     })
139 |   );
140 | });
141 | 
142 | module.exports = config;
143 | 


--------------------------------------------------------------------------------