webpack: scss, vue (#189)
WebPack에 scss와 vue를 사용할 수 있도록 세팅. 현재는 php서버와 코드가 강하게 엮여있기 때문에 vue-cli 대신 수동으로 webpack에 등록. 파일 번들링 경로는 다음과 같음 - scss + style -> css - ts -> js Reviewed-on: https://storage.hided.net/gitea/devsam/core/pulls/189 Co-authored-by: hide_d <hided62@gmail.com> Co-committed-by: hide_d <hided62@gmail.com>
This commit is contained in:
@@ -5,10 +5,15 @@
|
|||||||
{
|
{
|
||||||
"targets": {
|
"targets": {
|
||||||
"browsers": [
|
"browsers": [
|
||||||
"last 2 versions"
|
[
|
||||||
|
"last 2 versions",
|
||||||
|
"ie >= 11"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"modules":false
|
"useBuiltIns": "usage",
|
||||||
|
"corejs": 3,
|
||||||
|
"modules": false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -43,6 +43,8 @@ foreach(array_keys(General::INHERITANCE_KEY) as $key){
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=1024" />
|
<meta name="viewport" content="width=1024" />
|
||||||
|
<?= WebUtil::preloadCSS('css/inheritPoint.css') ?>
|
||||||
|
<?= WebUtil::preloadJS('js/inheritPoint.js') ?>
|
||||||
<?= WebUtil::printCSS('../e_lib/bootstrap.min.css') ?>
|
<?= WebUtil::printCSS('../e_lib/bootstrap.min.css') ?>
|
||||||
<?= WebUtil::printCSS('../d_shared/common.css') ?>
|
<?= WebUtil::printCSS('../d_shared/common.css') ?>
|
||||||
<?= WebUtil::printCSS('../css/config.css') ?>
|
<?= WebUtil::printCSS('../css/config.css') ?>
|
||||||
@@ -52,14 +54,13 @@ foreach(array_keys(General::INHERITANCE_KEY) as $key){
|
|||||||
<?= WebUtil::printJS('../e_lib/jquery-3.3.1.min.js') ?>
|
<?= WebUtil::printJS('../e_lib/jquery-3.3.1.min.js') ?>
|
||||||
<?= WebUtil::printJS('../e_lib/bootstrap.bundle.min.js') ?>
|
<?= WebUtil::printJS('../e_lib/bootstrap.bundle.min.js') ?>
|
||||||
<?= WebUtil::printJS('js/common.js') ?>
|
<?= WebUtil::printJS('js/common.js') ?>
|
||||||
<?= WebUtil::printJS('js/inheritPoint.js') ?>
|
|
||||||
<script>
|
<script>
|
||||||
var items = <?=Json::encode($items)?>;
|
var items = <?=Json::encode($items)?>;
|
||||||
var helpText = <?=Json::encode($pointHelpText)?>;
|
var helpText = <?=Json::encode($pointHelpText)?>;
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="formStart()">
|
<body>
|
||||||
|
|
||||||
<table style='width:1000px;margin:auto;' class='tb_layout bg0'>
|
<table style='width:1000px;margin:auto;' class='tb_layout bg0'>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -126,6 +127,9 @@ foreach(array_keys(General::INHERITANCE_KEY) as $key){
|
|||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
<?= WebUtil::printJS('js/inheritPoint.js') ?>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,23 +1,3 @@
|
|||||||
#inheritance_list{
|
#inheritance_list{display:flex;flex-wrap:wrap}.inherit_padding{width:33%;padding:10px 2px}.inherit_item{width:33%;padding:10px 2px}.col-form-label{text-align:right;padding-right:2ch}.inherit_value{text-align:right}
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inherit_padding{
|
/*# sourceMappingURL=inheritPoint.css.map*/
|
||||||
width: 33%;
|
|
||||||
padding: 10px 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inherit_item{
|
|
||||||
width: 33%;
|
|
||||||
padding: 10px 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-form-label{
|
|
||||||
text-align:right;
|
|
||||||
padding-right:2ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inherit_value{
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"file":"../css/inheritPoint.css","mappings":"AAAA,kBACI,aACA,eAGJ,iBACI,UACA,iBAGJ,cACI,UACA,iBAGJ,gBACI,iBACA,kBAGJ,eACI,iB","sources":["webpack://hidche_lib/./hwe/scss/inheritPoint.scss"],"sourcesContent":["#inheritance_list{\n display: flex;\n flex-wrap: wrap;\n}\n\n.inherit_padding{\n width: 33%;\n padding: 10px 2px;\n}\n\n.inherit_item{\n width: 33%;\n padding: 10px 2px;\n}\n\n.col-form-label{\n text-align:right;\n padding-right:2ch;\n}\n\n.inherit_value{\n text-align: right;\n}"],"names":[],"sourceRoot":""}
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,23 @@
|
|||||||
|
#inheritance_list{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inherit_padding{
|
||||||
|
width: 33%;
|
||||||
|
padding: 10px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inherit_item{
|
||||||
|
width: 33%;
|
||||||
|
padding: 10px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-form-label{
|
||||||
|
text-align:right;
|
||||||
|
padding-right:2ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inherit_value{
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
import "../scss/inheritPoint.scss";
|
||||||
|
|
||||||
import { sum } from "lodash";
|
import { sum } from "lodash";
|
||||||
import { unwrap } from "./util";
|
import { unwrap } from "./util";
|
||||||
declare global {
|
declare global {
|
||||||
@@ -35,4 +37,4 @@ function formStart() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.formStart = formStart;
|
formStart();
|
||||||
Vendored
+6
@@ -0,0 +1,6 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue'
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
+11
-2
@@ -15,21 +15,30 @@
|
|||||||
"author": "Hide_D",
|
"author": "Hide_D",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/lodash": "^4.14.172",
|
"core-js": "^3.16.1",
|
||||||
"lodash": "^4.17.21"
|
"lodash": "^4.17.21",
|
||||||
|
"vue": "^3.2.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/cli": "^7.14.8",
|
"@babel/cli": "^7.14.8",
|
||||||
"@babel/core": "^7.15.0",
|
"@babel/core": "^7.15.0",
|
||||||
"@babel/preset-env": "^7.15.0",
|
"@babel/preset-env": "^7.15.0",
|
||||||
"@babel/preset-typescript": "^7.15.0",
|
"@babel/preset-typescript": "^7.15.0",
|
||||||
|
"@types/lodash": "^4.14.172",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.29.1",
|
"@typescript-eslint/eslint-plugin": "^4.29.1",
|
||||||
"@typescript-eslint/parser": "^4.29.1",
|
"@typescript-eslint/parser": "^4.29.1",
|
||||||
|
"@vue/compiler-sfc": "^3.2.2",
|
||||||
"babel-loader": "^8.2.2",
|
"babel-loader": "^8.2.2",
|
||||||
"babel-plugin-lodash": "^3.3.4",
|
"babel-plugin-lodash": "^3.3.4",
|
||||||
|
"css-loader": "^6.2.0",
|
||||||
"eslint": "^7.32.0",
|
"eslint": "^7.32.0",
|
||||||
|
"mini-css-extract-plugin": "^2.2.0",
|
||||||
"pre-commit": "^1.2.2",
|
"pre-commit": "^1.2.2",
|
||||||
|
"sass": "^1.37.5",
|
||||||
|
"sass-loader": "^12.1.0",
|
||||||
|
"style-loader": "^3.2.1",
|
||||||
"typescript": "^4.3.5",
|
"typescript": "^4.3.5",
|
||||||
|
"vue-loader": "^16.5.0",
|
||||||
"webpack": "^5.49.0",
|
"webpack": "^5.49.0",
|
||||||
"webpack-cli": "^4.7.2"
|
"webpack-cli": "^4.7.2"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -103,6 +103,42 @@ class WebUtil
|
|||||||
return $decoded;
|
return $decoded;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public static function preloadCSS(string $path){
|
||||||
|
$upath = \phpUri::parse($path);
|
||||||
|
$path = $upath->join('');
|
||||||
|
if(!$upath->scheme && file_exists($upath->path)){
|
||||||
|
$mtime = filemtime($upath->path);
|
||||||
|
if($upath->query){
|
||||||
|
$tail = '&'.$mtime;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$tail = '?'.$mtime;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$tail = '';
|
||||||
|
}
|
||||||
|
return "<link href='{$path}{$tail}' rel='preload' as='style'>\n";
|
||||||
|
}
|
||||||
|
|
||||||
|
public static function preloadJS(string $path){
|
||||||
|
$upath = \phpUri::parse($path);
|
||||||
|
$path = $upath->join('');
|
||||||
|
if(!$upath->scheme && file_exists($upath->path)){
|
||||||
|
$mtime = filemtime($upath->path);
|
||||||
|
if($upath->query){
|
||||||
|
$tail = '&'.$mtime;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$tail = '?'.$mtime;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$tail = '';
|
||||||
|
}
|
||||||
|
return "<link href='{$path}{$tail}' rel='preload' as='script'>\n";
|
||||||
|
}
|
||||||
|
|
||||||
public static function printJS(string $path){
|
public static function printJS(string $path){
|
||||||
//async, defer 옵션 고려
|
//async, defer 옵션 고려
|
||||||
$upath = \phpUri::parse($path);
|
$upath = \phpUri::parse($path);
|
||||||
|
|||||||
+56
-3
@@ -1,4 +1,6 @@
|
|||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
const { VueLoaderPlugin } = require('vue-loader');
|
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||||
|
|
||||||
module.exports = [
|
module.exports = [
|
||||||
{
|
{
|
||||||
@@ -17,7 +19,7 @@ module.exports = [
|
|||||||
devtool: 'source-map',
|
devtool: 'source-map',
|
||||||
module: {
|
module: {
|
||||||
rules: [{
|
rules: [{
|
||||||
test: /\.(ts|tsx)$/,
|
test: /\.(ts|tsx)$/i,
|
||||||
exclude: /(node_modules)/,
|
exclude: /(node_modules)/,
|
||||||
use: {
|
use: {
|
||||||
loader: 'babel-loader',
|
loader: 'babel-loader',
|
||||||
@@ -28,8 +30,33 @@ module.exports = [
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}, {
|
||||||
|
test: /\.vue$/i,
|
||||||
|
exclude: /(node_modules)/,
|
||||||
|
use: [
|
||||||
|
'vue-loader'
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
test: /\.css$/i,
|
||||||
|
use: [
|
||||||
|
MiniCssExtractPlugin.loader,
|
||||||
|
"css-loader",
|
||||||
|
],
|
||||||
|
}, {
|
||||||
|
test: /\.s[ac]ss$/i,
|
||||||
|
use: [
|
||||||
|
MiniCssExtractPlugin.loader,
|
||||||
|
"css-loader",
|
||||||
|
"sass-loader",
|
||||||
|
],
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
|
plugins: [
|
||||||
|
new VueLoaderPlugin(),
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
filename: '../css/[name].css'
|
||||||
|
})
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'gateway',
|
name: 'gateway',
|
||||||
@@ -43,11 +70,11 @@ module.exports = [
|
|||||||
filename: '[name].js',
|
filename: '[name].js',
|
||||||
path: path.resolve(__dirname, 'js'),
|
path: path.resolve(__dirname, 'js'),
|
||||||
},
|
},
|
||||||
mode: 'none',
|
mode: 'production',
|
||||||
devtool: 'source-map',
|
devtool: 'source-map',
|
||||||
module: {
|
module: {
|
||||||
rules: [{
|
rules: [{
|
||||||
test: /\.(ts|tsx)$/,
|
test: /\.(ts|tsx)$/i,
|
||||||
exclude: /(node_modules)/,
|
exclude: /(node_modules)/,
|
||||||
use: {
|
use: {
|
||||||
loader: 'babel-loader',
|
loader: 'babel-loader',
|
||||||
@@ -58,7 +85,33 @@ module.exports = [
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.vue$/i,
|
||||||
|
exclude: /(node_modules)/,
|
||||||
|
use: [
|
||||||
|
{ loader: 'vue-loader' }
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
test: /\.css$/i,
|
||||||
|
use: [
|
||||||
|
MiniCssExtractPlugin.loader,
|
||||||
|
"css-loader",
|
||||||
|
],
|
||||||
|
}, {
|
||||||
|
test: /\.s[ac]ss$/i,
|
||||||
|
use: [
|
||||||
|
MiniCssExtractPlugin.loader,
|
||||||
|
"css-loader",
|
||||||
|
"sass-loader",
|
||||||
|
],
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
|
plugins: [
|
||||||
|
new VueLoaderPlugin(),
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
filename: '../css/[name].css'
|
||||||
|
}),
|
||||||
|
]
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|||||||
Reference in New Issue
Block a user