project setup done.
This commit is contained in:
11
.babelrc
Normal file
11
.babelrc
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"plugins": ["@babel/syntax-dynamic-import"],
|
||||
"presets": [
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"modules": false
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
/node_modules
|
||||
15
README.md
Normal file
15
README.md
Normal file
@@ -0,0 +1,15 @@
|
||||
# 🚀 Welcome to your new awesome project!
|
||||
|
||||
```bash
|
||||
yarn init
|
||||
yarn add webpack-cli --dev
|
||||
yarn webpack-cli init
|
||||
yarn add bootstrap @popperjs/core
|
||||
yarn add css-loader --dev
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
programmed by Elex
|
||||
|
||||
https://www.elex-project.com/
|
||||
1
dist/main.css
vendored
Normal file
1
dist/main.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/main.js
vendored
Normal file
2
dist/main.js
vendored
Normal file
File diff suppressed because one or more lines are too long
5
dist/main.js.LICENSE.txt
vendored
Normal file
5
dist/main.js.LICENSE.txt
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap v5.1.0 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
20
examples/buttons.html
Normal file
20
examples/buttons.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="../dist/main.css" rel="stylesheet" />
|
||||
<title>Hello, world!</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
|
||||
<p>Hello</p>
|
||||
<button type="button" class="btn btn-primary">버튼</button>
|
||||
<script src="../dist/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
12
index.html
Normal file
12
index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webpack App</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello world!</h1>
|
||||
<h2>Tip: Check your console</h2>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
37
package.json
Normal file
37
package.json
Normal file
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "my-bootstrap-project",
|
||||
"version": "1.0.0",
|
||||
"description": "My Bootstrap project",
|
||||
"main": "index.js",
|
||||
"author": "Elex",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.0",
|
||||
"@babel/preset-env": "^7.15.0",
|
||||
"@webpack-cli/generators": "^2.2.0",
|
||||
"autoprefixer": "^10.3.1",
|
||||
"babel-loader": "^8.2.2",
|
||||
"css-loader": "^6.2.0",
|
||||
"mini-css-extract-plugin": "^2.2.0",
|
||||
"postcss": "^8.3.6",
|
||||
"postcss-loader": "^6.1.1",
|
||||
"prettier": "^2.3.2",
|
||||
"sass": "^1.37.5",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.49.0",
|
||||
"webpack-cli": "^4.7.2",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack --mode=production --node-env=production",
|
||||
"build:dev": "webpack --mode=development",
|
||||
"build:prod": "webpack --mode=production --node-env=production",
|
||||
"watch": "webpack --watch",
|
||||
"serve": "webpack serve"
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.9.3",
|
||||
"bootstrap": "^5.1.0"
|
||||
}
|
||||
}
|
||||
5
postcss.config.js
Normal file
5
postcss.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
// Add you postcss configuration here
|
||||
// Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
|
||||
plugins: [["autoprefixer"]],
|
||||
};
|
||||
83
src/_bootstrap.scss
Normal file
83
src/_bootstrap.scss
Normal file
@@ -0,0 +1,83 @@
|
||||
//---------------------------------------------
|
||||
//
|
||||
// Partially loading Bootstrap's components
|
||||
//
|
||||
// 1. Functions
|
||||
// 2. Variables
|
||||
// 3. Mixins
|
||||
// 4. Root + Reboot
|
||||
// 5. Type
|
||||
// 6. Components
|
||||
// 7. Helpers & Mixins for Breakpoints + Print
|
||||
//
|
||||
//---------------------------------------------
|
||||
|
||||
//---------------------------------------------
|
||||
// 1. Functions
|
||||
//---------------------------------------------
|
||||
|
||||
@import "~bootstrap/scss/functions";
|
||||
|
||||
//---------------------------------------------
|
||||
// 2. Variables
|
||||
//---------------------------------------------
|
||||
|
||||
@import "~bootstrap/scss/variables";
|
||||
|
||||
//---------------------------------------------
|
||||
// 3. Mixins
|
||||
//---------------------------------------------
|
||||
|
||||
@import "~bootstrap/scss/mixins";
|
||||
@import "~bootstrap/scss/utilities";
|
||||
|
||||
//---------------------------------------------
|
||||
// 4. Root + Reboot
|
||||
//---------------------------------------------
|
||||
|
||||
@import "~bootstrap/scss/root";
|
||||
@import "~bootstrap/scss/reboot";
|
||||
|
||||
//---------------------------------------------
|
||||
// 5. Type
|
||||
//---------------------------------------------
|
||||
|
||||
@import "~bootstrap/scss/type";
|
||||
|
||||
//---------------------------------------------
|
||||
// 6. Components
|
||||
//---------------------------------------------
|
||||
|
||||
@import "~bootstrap/scss/images";
|
||||
@import "~bootstrap/scss/containers";
|
||||
@import "~bootstrap/scss/grid";
|
||||
@import "~bootstrap/scss/tables";
|
||||
@import "~bootstrap/scss/forms";
|
||||
@import "~bootstrap/scss/buttons";
|
||||
@import "~bootstrap/scss/transitions";
|
||||
@import "~bootstrap/scss/dropdown";
|
||||
@import "~bootstrap/scss/button-group";
|
||||
@import "~bootstrap/scss/nav";
|
||||
@import "~bootstrap/scss/navbar";
|
||||
@import "~bootstrap/scss/card";
|
||||
@import "~bootstrap/scss/accordion";
|
||||
@import "~bootstrap/scss/breadcrumb";
|
||||
@import "~bootstrap/scss/pagination";
|
||||
@import "~bootstrap/scss/badge";
|
||||
@import "~bootstrap/scss/alert";
|
||||
@import "~bootstrap/scss/progress";
|
||||
@import "~bootstrap/scss/list-group";
|
||||
@import "~bootstrap/scss/close";
|
||||
@import "~bootstrap/scss/toasts";
|
||||
@import "~bootstrap/scss/modal";
|
||||
@import "~bootstrap/scss/tooltip";
|
||||
@import "~bootstrap/scss/popover";
|
||||
@import "~bootstrap/scss/carousel";
|
||||
@import "~bootstrap/scss/spinners";
|
||||
|
||||
//---------------------------------------------
|
||||
// 7. Helpers & Mixins for Breakpoints + Print
|
||||
//---------------------------------------------
|
||||
|
||||
@import "~bootstrap/scss/helpers";
|
||||
@import "~bootstrap/scss/utilities/api";
|
||||
53
src/_variables.scss
Normal file
53
src/_variables.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
//---------------------------------------------
|
||||
//
|
||||
// Variables
|
||||
//
|
||||
// 1. Bootstrap Fonts
|
||||
// 2. Bootstrap Globals
|
||||
// 3. Bootstrap Colors
|
||||
// 4. Bootstrap Container Width
|
||||
//
|
||||
//---------------------------------------------
|
||||
|
||||
//---------------------------------------------
|
||||
// 1. Bootstrap Fonts
|
||||
//---------------------------------------------
|
||||
|
||||
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
|
||||
//---------------------------------------------
|
||||
// 2. Bootstrap Globals
|
||||
//---------------------------------------------
|
||||
|
||||
$enable-rounded: true;
|
||||
$enable-shadows: false;
|
||||
$enable-gradients: false;
|
||||
|
||||
//---------------------------------------------
|
||||
// 3. Bootstrap Colors
|
||||
//---------------------------------------------
|
||||
|
||||
$body-color: #212121; // The default text color
|
||||
|
||||
$primary: #303f9f;
|
||||
$secondary: #6c757d;
|
||||
$success: #198754;
|
||||
$info: #0dcaf0;
|
||||
$warning: #ffc107;
|
||||
$danger: #dc3545;
|
||||
$light: #f8f9fa;
|
||||
$dark: #212529;
|
||||
|
||||
//---------------------------------------------
|
||||
// 4. Bootstrap Container Width
|
||||
//---------------------------------------------
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px,
|
||||
xxl: 1320px,
|
||||
);
|
||||
5
src/index.js
Normal file
5
src/index.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import { bootstrap } from "bootstrap";
|
||||
import { popper } from "@popperjs/core";
|
||||
import "./index.scss";
|
||||
|
||||
console.log("Hello World!");
|
||||
3
src/index.scss
Normal file
3
src/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "variables";
|
||||
@import "bootstrap";
|
||||
//@import "fonts";
|
||||
69
webpack.config.js
Normal file
69
webpack.config.js
Normal file
@@ -0,0 +1,69 @@
|
||||
// Generated using webpack-cli https://github.com/webpack/webpack-cli
|
||||
|
||||
const path = require("path");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
|
||||
const isProduction = process.env.NODE_ENV == "production";
|
||||
|
||||
const config = {
|
||||
entry: "./src/index.js",
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
},
|
||||
devServer: {
|
||||
open: true,
|
||||
host: "localhost",
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin(),
|
||||
// Add your plugins here
|
||||
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|jsx)$/i,
|
||||
loader: "babel-loader",
|
||||
},
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
importLoaders: 2,
|
||||
sourceMap: true,
|
||||
url: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
postcssOptions: {
|
||||
plugins: ["autoprefixer"],
|
||||
},
|
||||
},
|
||||
},
|
||||
"sass-loader",
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
|
||||
type: "asset",
|
||||
},
|
||||
|
||||
// Add your rules for custom modules here
|
||||
// Learn more about loaders from https://webpack.js.org/loaders/
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = () => {
|
||||
if (isProduction) {
|
||||
config.mode = "production";
|
||||
} else {
|
||||
config.mode = "development";
|
||||
}
|
||||
return config;
|
||||
};
|
||||
5604
yarn-error.log
Normal file
5604
yarn-error.log
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user