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

Minify JS, CSS, and HTML in production

Browse Source 
- Extracted CSS into own file in production
- Minified CSS in production
- Added TerserJS back in to minify JS in production
- Minified HTML in production as well
This commit is contained in:
Colt Steele 2019-03-05 21:02:05 -08:00
parent 34e7d30aef
commit 991f703d05
6 changed files with 1018 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

962
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -18,7 +18,9 @@
"html-loader": "^0.5.5", "html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"jquery": "^3.3.1", "jquery": "^3.3.1",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0", "node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"popper.js": "^1.14.7", "popper.js": "^1.14.7",
"sass-loader": "^7.1.0", "sass-loader": "^7.1.0",
"style-loader": "^0.23.1", "style-loader": "^0.23.1",

2
src/template.html
View File

@ -6,6 +6,7 @@
<title>Webpack Demo</title> <title>Webpack Demo</title>
</head> </head>
<body class="container"> <body class="container">
<!-- Bootstrap Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button <button
@ -47,6 +48,7 @@
<h1 class="text-center mt-5"> <h1 class="text-center mt-5">
Welcome! Welcome!
</h1> </h1>
<div class="alert alert-danger" id="error" role="alert"></div> <div class="alert alert-danger" id="error" role="alert"></div>
<div class="row mt-5"> <div class="row mt-5">
<div class="col"> <div class="col">

13
webpack.common.js
View File

@ -6,21 +6,8 @@ module.exports = {
main: "./src/index.js", main: "./src/index.js",
vendor: "./src/vendor.js" vendor: "./src/vendor.js"
}, },
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html"
})
],
module: { module: {
rules: [ rules: [
{
test: /\.scss$/,
use: [
"style-loader", //3. Inject styles into DOM
"css-loader", //2. Turns css into commonjs
"sass-loader" //1. Turns sass into css
]
},
{ {
test: /\.html$/, test: /\.html$/,
use: ["html-loader"] use: ["html-loader"]

18
webpack.dev.js
View File

@ -1,11 +1,29 @@
const path = require("path"); const path = require("path");
const common = require("./webpack.common"); const common = require("./webpack.common");
const merge = require("webpack-merge"); const merge = require("webpack-merge");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = merge(common, { module.exports = merge(common, {
mode: "development", mode: "development",
output: { output: {
filename: "[name].bundle.js", filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist") path: path.resolve(__dirname, "dist")
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html"
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", //3. Inject styles into DOM
"css-loader", //2. Turns css into commonjs
"sass-loader" //1. Turns sass into css
]
}
]
} }
}); });

35
webpack.prod.js
View File

@ -2,6 +2,10 @@ const path = require("path");
const common = require("./webpack.common"); const common = require("./webpack.common");
const merge = require("webpack-merge"); const merge = require("webpack-merge");
const CleanWebpackPlugin = require("clean-webpack-plugin"); const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = merge(common, { module.exports = merge(common, {
mode: "production", mode: "production",
@ -9,5 +13,34 @@ module.exports = merge(common, {
filename: "[name].[contentHash].bundle.js", filename: "[name].[contentHash].bundle.js",
path: path.resolve(__dirname, "dist") path: path.resolve(__dirname, "dist")
}, },
plugins: [new CleanWebpackPlugin()] optimization: {
minimizer: [
new OptimizeCssAssetsPlugin(),
new TerserPlugin(),
new HtmlWebpackPlugin({
template: "./src/template.html",
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true
}
})
]
},
plugins: [
new MiniCssExtractPlugin({ filename: "[name].[contentHash].css" }),
new CleanWebpackPlugin()
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader, //3. Extract css into files
"css-loader", //2. Turns css into commonjs
"sass-loader" //1. Turns sass into css
]
}
]
}
}); });