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 was merged in pull request #189.
This commit is contained in:
@@ -5,10 +5,15 @@
|
||||
{
|
||||
"targets": {
|
||||
"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 http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<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('../d_shared/common.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/bootstrap.bundle.min.js') ?>
|
||||
<?= WebUtil::printJS('js/common.js') ?>
|
||||
<?= WebUtil::printJS('js/inheritPoint.js') ?>
|
||||
<script>
|
||||
var items = <?=Json::encode($items)?>;
|
||||
var helpText = <?=Json::encode($pointHelpText)?>;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="formStart()">
|
||||
<body>
|
||||
|
||||
<table style='width:1000px;margin:auto;' class='tb_layout bg0'>
|
||||
<tr>
|
||||
@@ -126,6 +127,9 @@ foreach(array_keys(General::INHERITANCE_KEY) as $key){
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
|
||||
<?= WebUtil::printJS('js/inheritPoint.js') ?>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,23 +1,3 @@
|
||||
#inheritance_list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#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}
|
||||
|
||||
.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;
|
||||
}
|
||||
/*# sourceMappingURL=inheritPoint.css.map*/
|
||||
@@ -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 { unwrap } from "./util";
|
||||
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",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/lodash": "^4.14.172",
|
||||
"lodash": "^4.17.21"
|
||||
"core-js": "^3.16.1",
|
||||
"lodash": "^4.17.21",
|
||||
"vue": "^3.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.14.8",
|
||||
"@babel/core": "^7.15.0",
|
||||
"@babel/preset-env": "^7.15.0",
|
||||
"@babel/preset-typescript": "^7.15.0",
|
||||
"@types/lodash": "^4.14.172",
|
||||
"@typescript-eslint/eslint-plugin": "^4.29.1",
|
||||
"@typescript-eslint/parser": "^4.29.1",
|
||||
"@vue/compiler-sfc": "^3.2.2",
|
||||
"babel-loader": "^8.2.2",
|
||||
"babel-plugin-lodash": "^3.3.4",
|
||||
"css-loader": "^6.2.0",
|
||||
"eslint": "^7.32.0",
|
||||
"mini-css-extract-plugin": "^2.2.0",
|
||||
"pre-commit": "^1.2.2",
|
||||
"sass": "^1.37.5",
|
||||
"sass-loader": "^12.1.0",
|
||||
"style-loader": "^3.2.1",
|
||||
"typescript": "^4.3.5",
|
||||
"vue-loader": "^16.5.0",
|
||||
"webpack": "^5.49.0",
|
||||
"webpack-cli": "^4.7.2"
|
||||
},
|
||||
|
||||
@@ -103,6 +103,42 @@ class WebUtil
|
||||
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){
|
||||
//async, defer 옵션 고려
|
||||
$upath = \phpUri::parse($path);
|
||||
|
||||
+56
-3
@@ -1,4 +1,6 @@
|
||||
const path = require('path');
|
||||
const { VueLoaderPlugin } = require('vue-loader');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
@@ -17,7 +19,7 @@ module.exports = [
|
||||
devtool: 'source-map',
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.(ts|tsx)$/,
|
||||
test: /\.(ts|tsx)$/i,
|
||||
exclude: /(node_modules)/,
|
||||
use: {
|
||||
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',
|
||||
@@ -43,11 +70,11 @@ module.exports = [
|
||||
filename: '[name].js',
|
||||
path: path.resolve(__dirname, 'js'),
|
||||
},
|
||||
mode: 'none',
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.(ts|tsx)$/,
|
||||
test: /\.(ts|tsx)$/i,
|
||||
exclude: /(node_modules)/,
|
||||
use: {
|
||||
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