phares3757/webpack-demo-app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add entrypoint for vendor js file, add bootstrap js

Browse Source 
- Now we have 2 entry files and 2 bundles
- The vendor file houses code that is less likely to change, 3rd party libraries
- The main file has all of our app code
This commit is contained in:
Colt Steele 2019-03-05 18:37:07 -08:00
parent 947290016d
commit 34e7d30aef
7 changed files with 59 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@ -3700,6 +3700,12 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true
},
"jquery": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
"dev": true
},
"js-base64": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
@ -4872,6 +4878,12 @@
"find-up": "^3.0.0"
}
},
"popper.js": {
"version": "1.14.7",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz",
"integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==",
"dev": true
},
"portfinder": {
"version": "1.0.20",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",

2
package.json
View File

@ -17,7 +17,9 @@
"file-loader": "^3.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.3.1",
"node-sass": "^4.11.0",
"popper.js": "^1.14.7",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",

38
src/template.html
View File

@ -6,6 +6,44 @@
<title>Webpack Demo</title>
</head>
<body class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
</div>
</nav>
<h1 class="text-center mt-5">
Welcome!
</h1>

1
src/vendor.js Normal file
View File

@ -0,0 +1 @@
import "bootstrap";

5
webpack.common.js
View File

@ -2,7 +2,10 @@ const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
entry: {
main: "./src/index.js",
vendor: "./src/vendor.js"
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html"

2
webpack.dev.js
View File

@ -5,7 +5,7 @@ const merge = require("webpack-merge");
module.exports = merge(common, {
mode: "development",
output: {
filename: "main.js",
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
}
});

2
webpack.prod.js
View File

@ -6,7 +6,7 @@ const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = merge(common, {
mode: "production",
output: {
filename: "main.[contentHash].js",
filename: "[name].[contentHash].bundle.js",
path: path.resolve(__dirname, "dist")
},
plugins: [new CleanWebpackPlugin()]