BobsonLin
/
custom-bootstrap4
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Add Webpack dev-server setting

Browse Source
master
Bobson Lin 3 years ago
parent b3dbef891e
commit 2c0dbb4f08
4 changed files with 2151 additions and 176 deletions
Show Stats Download Patch File Download Diff File

45
package.json
Unescape Escape View File

@ -1,21 +1,24 @@
{
"scripts": {
"compile:sass": "node-sass src/scss/argon-theme.scss css/argon.css",
"build:dev": "webpack --mode=development",
"watch": "webpack --mode=development --watch"
},
"dependencies": {
"bootstrap": "^4.5.3"
},
"devDependencies": {
"autoprefixer": "^10.0.4",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^5.0.0",
"postcss-loader": "^4.1.0",
"sass-loader": "^10.1.0",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0"
}
}
{
"scripts": {
"compile:sass": "node-sass src/scss/argon-theme.scss css/argon.css",
"build:dev": "webpack --mode=development",
"watch": "webpack --mode=development --watch",
"serve": "webpack serve"
},
"dependencies": {
"bootstrap": "^4.5.3"
},
"devDependencies": {
"autoprefixer": "^10.0.4",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^5.0.0",
"postcss-loader": "^4.1.0",
"raw-loader": "^4.0.2",
"sass-loader": "^10.1.0",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
}
}

254
src/index.html
Unescape Escape View File

@ -5,8 +5,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/spacelab-theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.1/font/bootstrap-icons.css">
</head>
@ -21,13 +19,23 @@
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>
<div class="mt-2">
<button type="button" class="btn btn-outline-default">Default</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
</div>
<div class="mt-2 card-deck">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/1000/600" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
@ -43,149 +51,157 @@
<img class="card-img-top" src="https://picsum.photos/1000/600" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<i class="fa fa-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<i class="fa fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
<hr>
<div class="container">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" placeholder="Regular" class="form-control" disabled />
<div class="col-md-6">
<div class="form-group">
<input type="text" placeholder="Regular" class="form-control" disabled />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
</div>
<input class="form-control" placeholder="Search" type="text">
</div>
<input class="form-control" placeholder="Search" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="input-group mb-4">
<input class="form-control" placeholder="Birthday" type="text">
<div class="input-group-append">
<span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
<div class="col-md-6">
<div class="form-group">
<div class="input-group mb-4">
<input class="form-control" placeholder="Birthday" type="text">
<div class="input-group-append">
<span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group has-success">
<input type="text" placeholder="Success" class="form-control is-valid" />
<div class="row">
<div class="col-md-6">
<div class="form-group has-success">
<input type="text" placeholder="Success" class="form-control is-valid" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group has-danger">
<input type="email" placeholder="Error Input" class="form-control is-invalid" />
<div class="col-md-6">
<div class="form-group has-danger">
<input type="email" placeholder="Error Input" class="form-control is-invalid" />
</div>
</div>
</div>
</div>
</form>
<table class="table">
<thead>
</form>
</div>
<div id="table-section" class="container">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">«</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">»</a>
</li>
</ul>
</nav>
<table class="table">
<thead>
<tr>
<th class="text-center">#</th>
<th>Name</th>
<th>Job Position</th>
<th>Since</th>
<th class="text-right">Salary</th>
<th class="text-right">Actions</th>
<th class="text-center">#</th>
<th>Name</th>
<th>Job Position</th>
<th>Since</th>
<th class="text-right">Salary</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Andrew Mike</td>
<td>Develop</td>
<td>2013</td>
<td class="text-right">&euro; 99,225</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-circle-08 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-settings-gear-65 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-fat-remove pt-1"></i>
</button>
</td>
<td class="text-center">1</td>
<td>Andrew Mike</td>
<td>Develop</td>
<td>2013</td>
<td class="text-right">&euro; 99,225</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-circle-08 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm " data-original-title=""
title="">
<i class="ni ni-settings-gear-65 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-fat-remove pt-1"></i>
</button>
</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>John Doe</td>
<td>Design</td>
<td>2012</td>
<td class="text-right">&euro; 89,241</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-circle-08 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-settings-gear-65 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-fat-remove pt-1"></i>
</button>
</td>
<td class="text-center">2</td>
<td>John Doe</td>
<td>Design</td>
<td>2012</td>
<td class="text-right">&euro; 89,241</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-circle-08 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm " data-original-title=""
title="">
<i class="ni ni-settings-gear-65 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-fat-remove pt-1"></i>
</button>
</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Alex Mike</td>
<td>Design</td>
<td>2010</td>
<td class="text-right">&euro; 92,144</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm btn-simple" data-original-title="" title="">
<i class="ni ni-circle-08 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm btn-simple" data-original-title="" title="">
<i class="ni ni-settings-gear-65 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm btn-simple" data-original-title="" title="">
<i class="ni ni-fat-remove pt-1"></i>
</button>
</td>
<td class="text-center">3</td>
<td>Alex Mike</td>
<td>Design</td>
<td>2010</td>
<td class="text-right">&euro; 92,144</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm btn-simple" data-original-title=""
title="">
<i class="ni ni-circle-08 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm btn-simple"
data-original-title="" title="">
<i class="ni ni-settings-gear-65 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm btn-simple" data-original-title=""
title="">
<i class="ni ni-fat-remove pt-1"></i>
</button>
</td>
</tr>
</tbody>
</table>
</tbody>
</table>
</div>
</body>
<div class="col-md-6">
<div class="card">

63
webpack.config.js
Unescape Escape View File

@ -1,35 +1,66 @@
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// Ref: https://stackoverflow.com/a/60021512/6133998
const populateHtmlPlugins = (pagesArray) => {
res = [];
pagesArray.forEach((page) => {
res.push(
new HtmlWebpackPlugin({
page,
filename: `${page.toLowerCase()}.html`,
template: `./src/${page.toLowerCase()}.html`,
})
);
});
return res;
};
const pages = populateHtmlPlugins(["index", "cards"]);
module.exports = {
entry: './src/main.js',
entry: {
main: ["./src/main.js"],
spacelab: ["./src/scss/spacelab-theme.scss"],
cyborg: ["./src/scss/cyborg-theme.scss"]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
path: path.resolve(__dirname, "dist"),
filename: "js/[name].js",
},
resolve: {
modules: ['node_modules'],
modules: ["node_modules"],
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
// 取代 style-loader。作用: 提取 js 中的 css 成單獨文件
MiniCssExtractPlugin.loader,
// 將 css 文件整合倒 js 文件中
"css-loader",
// 將 sass/scss 編譯成 css
"sass-loader",
],
},
{
test: /\.html$/,
loader: "raw-loader",
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
filename: "css/[name].css",
}),
...pages,
],
};
devServer: {
// contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000,
open: true,
hot: true,
},
};

1965
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save