v1.4.2-patch.1 - add npm-webpack-demo webpack@5.78, vue@3.4
This commit is contained in:
LINING-PC\lining
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
|
|||||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||||
|
|
||||||
|
## [1.4.2-patch1] - 2025-11-03
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
- 缺陷修复：更新父级任务后，再次更新子级任务是发生无限循环调用的问题修复
|
||||||
|
- Defect fix: Fixed the issue of infinite loop calls when updating child tasks after updating the parent task
|
||||||
|
|
||||||
## [1.4.2] - 2025-11-01
|
## [1.4.2] - 2025-11-01
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
|
|||||||
@@ -0,0 +1,4 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
# Vue 3 + Webpack 5 项目
|
||||||
|
|
||||||
|
## 环境要求
|
||||||
|
- webpack@5.78.0
|
||||||
|
- vue@3.4.34
|
||||||
|
|
||||||
|
## 安装依赖
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## 开发模式
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## 生产构建
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
## 项目结构
|
||||||
|
```
|
||||||
|
npm-webpack-test/
|
||||||
|
├── public/
|
||||||
|
│ └── index.html # HTML 模板
|
||||||
|
├── src/
|
||||||
|
│ ├── App.vue # 根组件
|
||||||
|
│ └── main.js # 入口文件
|
||||||
|
├── package.json # 项目配置
|
||||||
|
├── webpack.config.js # Webpack 配置
|
||||||
|
└── README.md # 说明文档
|
||||||
|
```
|
||||||
Generated
+5209
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"name": "npm-webpack-test",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Vue 3 project with Webpack 5",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "webpack serve --mode development --open",
|
||||||
|
"build": "webpack --mode production"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"element-plus": "^2.11.7",
|
||||||
|
"jordium-gantt-vue3": "^1.4.2-patch.1",
|
||||||
|
"vue": "^3.4.34"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^24.10.0",
|
||||||
|
"@vue/compiler-sfc": "3.4.34",
|
||||||
|
"css-loader": "^6.7.3",
|
||||||
|
"html-webpack-plugin": "^5.5.0",
|
||||||
|
"style-loader": "^3.3.1",
|
||||||
|
"ts-loader": "^9.5.4",
|
||||||
|
"typescript": "^5.9.3",
|
||||||
|
"vue-loader": "^17.0.1",
|
||||||
|
"webpack": "5.78.0",
|
||||||
|
"webpack-cli": "^5.0.1",
|
||||||
|
"webpack-dev-server": "^4.11.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vue 3 + Webpack 5</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,381 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="height: 600px;">
|
||||||
|
<GanttChart
|
||||||
|
:tasks="tasks"
|
||||||
|
:milestones="milestones"
|
||||||
|
:task-list-config="taskListConfig"
|
||||||
|
:toolbar-config="toolbarConfig"
|
||||||
|
:use-default-drawer="false"
|
||||||
|
:use-default-milestone-dialog="false"
|
||||||
|
:locale-messages="customMessages"
|
||||||
|
:allow-drag-and-resize="true"
|
||||||
|
@add-task="showAddTaskDrawer = true"
|
||||||
|
@add-milestone="showAddMilestoneDialog = true"
|
||||||
|
@task-double-click="onTaskDblclick"
|
||||||
|
@task-click="onTaskClick"
|
||||||
|
@milestone-double-click="onMilestoneDblclick"
|
||||||
|
>
|
||||||
|
</GanttChart>
|
||||||
|
</div>
|
||||||
|
<!-- 自定义添加任务按钮 -->
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-primary" @click="showAddTaskDrawer = true">添加任务</button>
|
||||||
|
<button class="btn btn-primary" @click="showAddMilestoneDialog = true">添加里程碑</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 自定义抽屉组件 (原生HTML替代 el-drawer) -->
|
||||||
|
<div v-if="showAddTaskDrawer" class="drawer-overlay" @click="showAddTaskDrawer = false">
|
||||||
|
<div class="drawer-container" @click.stop>
|
||||||
|
<div class="drawer-header">
|
||||||
|
<h3>自定义添加任务组件</h3>
|
||||||
|
<button class="close-btn" @click="showAddTaskDrawer = false">×</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="drawer-body">
|
||||||
|
<div class="form-item">
|
||||||
|
<label>任务名称:</label>
|
||||||
|
<input v-model="newTask.name" type="text" placeholder="请输入任务名称" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-item">
|
||||||
|
<label>开始日期:</label>
|
||||||
|
<input v-model="newTask.startDate" type="date" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-item">
|
||||||
|
<label>结束日期:</label>
|
||||||
|
<input v-model="newTask.endDate" type="date" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="drawer-footer">
|
||||||
|
<button class="btn btn-primary" @click="addTask">确定</button>
|
||||||
|
<button class="btn btn-default" @click="showAddTaskDrawer = false">取消</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 自定义Dialog组件基于element plus -->
|
||||||
|
<el-dialog
|
||||||
|
title="自定义添加里程碑组件 - Element Plus"
|
||||||
|
v-model="showAddMilestoneDialog"
|
||||||
|
width="400px"
|
||||||
|
@close="newTask = { name: '', startDate: '', endDate: '' }"
|
||||||
|
>
|
||||||
|
<template #default>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>任务名称:</label>
|
||||||
|
<el-input v-model="newTask.name" placeholder="请输入任务名称" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-item">
|
||||||
|
<label>日期:</label>
|
||||||
|
<el-date-picker v-model="newTask.startDate" type="date" value-format="YYYY-MM-DD" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="addMilestone">确定</el-button>
|
||||||
|
<el-button @click="showAddMilestoneDialog = false">取消</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { GanttChart } from 'jordium-gantt-vue3'
|
||||||
|
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
||||||
|
|
||||||
|
// 定义类型接口
|
||||||
|
interface TaskListColumnConfig {
|
||||||
|
key: string;
|
||||||
|
label: string;
|
||||||
|
visible: boolean;
|
||||||
|
width?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ToolbarConfig {
|
||||||
|
showAddTask?: boolean;
|
||||||
|
showAddMilestone?: boolean;
|
||||||
|
showTodayLocate?: boolean;
|
||||||
|
showExportCsv?: boolean;
|
||||||
|
showExportPdf?: boolean;
|
||||||
|
showLanguage?: boolean;
|
||||||
|
showTheme?: boolean;
|
||||||
|
showFullscreen?: boolean;
|
||||||
|
showTimeScale?: boolean;
|
||||||
|
timeScaleDimensions?: string[];
|
||||||
|
defaultTimeScale?: string;
|
||||||
|
showExpandCollapse?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tasks = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '项目启动',
|
||||||
|
startDate: '2025-10-30',
|
||||||
|
endDate: '2025-11-5',
|
||||||
|
progress: 100,
|
||||||
|
department: '管理部',
|
||||||
|
departmentCode: 'D001',
|
||||||
|
type: 'task',
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const milestones = ref([
|
||||||
|
{
|
||||||
|
id: 101,
|
||||||
|
name: '项目立项',
|
||||||
|
startDate: '2025-10-29',
|
||||||
|
type: 'milestone',
|
||||||
|
icon: 'diamond'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const customMessages = {
|
||||||
|
'zh-CN': {
|
||||||
|
department: '部门',
|
||||||
|
departmentCode: '部门编号',
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
department: 'Department',
|
||||||
|
departmentCode: 'Department Code',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// const tasks = ref([])
|
||||||
|
|
||||||
|
// const milestones = ref([])
|
||||||
|
const showAddTaskDrawer = ref(false);
|
||||||
|
const showAddMilestoneDialog = ref(false);
|
||||||
|
|
||||||
|
// 定义可动态配置的列
|
||||||
|
const availableColumns = ref<TaskListColumnConfig[]>([
|
||||||
|
{ key: 'startDate', label: '开始日期', visible: true },
|
||||||
|
{ key: 'endDate', label: '结束日期', visible: true },
|
||||||
|
{ key: 'progress', label: '进度', visible: true },
|
||||||
|
{ key: 'department', label: '部门', visible: true, width: 120 },
|
||||||
|
{ key: 'departmentCode', label: '部门编号', visible: true },
|
||||||
|
])
|
||||||
|
|
||||||
|
// TaskList宽度配置示例
|
||||||
|
const taskListConfig = {
|
||||||
|
defaultWidth: '50%', // 默认展开宽度50%
|
||||||
|
minWidth: '300px', // 最小宽度300px（默认280px）
|
||||||
|
maxWidth: '1200px', // 最大宽度1200px（默认1160px）
|
||||||
|
columns: availableColumns.value
|
||||||
|
}
|
||||||
|
|
||||||
|
// toolbar配置示例
|
||||||
|
const toolbarConfig: ToolbarConfig = {
|
||||||
|
showAddTask: true, // 显示添加任务按钮
|
||||||
|
showAddMilestone: true, // 显示添加里程碑按钮
|
||||||
|
showTodayLocate: true, // 显示定位到今天按钮
|
||||||
|
showExportCsv: true, // 显示导出CSV按钮
|
||||||
|
showExportPdf: true, // 显示导出PDF按钮
|
||||||
|
showLanguage: true, // 显示语言切换按钮
|
||||||
|
showTheme: true, // 显示主题切换按钮
|
||||||
|
showFullscreen: true, // 显示全屏按钮
|
||||||
|
showTimeScale: true, // 显示时间刻度按钮组
|
||||||
|
timeScaleDimensions: [ // 显示所有时间刻度维度
|
||||||
|
'hour', 'day', 'week', 'month', 'quarter', 'year'
|
||||||
|
],
|
||||||
|
defaultTimeScale: 'week', // 默认选中周视图
|
||||||
|
showExpandCollapse: false // 显示展开/折叠按钮
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const newTask = ref({
|
||||||
|
name: '',
|
||||||
|
startDate: '',
|
||||||
|
endDate: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const addTask = () => {
|
||||||
|
tasks.value.push({
|
||||||
|
id: tasks.value.length + 1,
|
||||||
|
name: newTask.value.name,
|
||||||
|
startDate: newTask.value.startDate,
|
||||||
|
endDate: newTask.value.endDate,
|
||||||
|
progress: 0,
|
||||||
|
department: '未分配',
|
||||||
|
departmentCode: 'D000',
|
||||||
|
type: 'task',
|
||||||
|
});
|
||||||
|
newTask.value = { name: '', startDate: '', endDate: '' };
|
||||||
|
showAddTaskDrawer.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const addMilestone = () => {
|
||||||
|
milestones.value.push({
|
||||||
|
id: milestones.value.length + 101,
|
||||||
|
name: newTask.value.name,
|
||||||
|
startDate: newTask.value.startDate,
|
||||||
|
type: 'milestone',
|
||||||
|
icon: 'diamond'
|
||||||
|
});
|
||||||
|
console.log('milestones: ', milestones.value)
|
||||||
|
newTask.value = { name: '', startDate: '', endDate: '' };
|
||||||
|
showAddMilestoneDialog.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const onTaskDblclick = (task: any) => {
|
||||||
|
alert(`双击任务: ${task.name}`)
|
||||||
|
}
|
||||||
|
const onTaskClick = (task: any) => {
|
||||||
|
alert(`单击任务: ${task.name}`)
|
||||||
|
}
|
||||||
|
const onMilestoneDblclick = (milestone: any) => {
|
||||||
|
alert(`双击里程碑: ${milestone.name}`)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 抽屉遮罩层 */
|
||||||
|
.drawer-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
animation: fadeIn 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 抽屉容器 */
|
||||||
|
.drawer-container {
|
||||||
|
width: 400px;
|
||||||
|
max-width: 90%;
|
||||||
|
background: white;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
|
||||||
|
animation: slideIn 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 抽屉头部 */
|
||||||
|
.drawer-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #999;
|
||||||
|
padding: 0;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn:hover {
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 抽屉主体 */
|
||||||
|
.drawer-body {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表单项 */
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 抽屉底部 */
|
||||||
|
.drawer-footer {
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-top: 1px solid #e8e8e8;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮样式 */
|
||||||
|
.btn {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #409eff;
|
||||||
|
color: white;
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: #66b1ff;
|
||||||
|
border-color: #66b1ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-default {
|
||||||
|
background: white;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-default:hover {
|
||||||
|
color: #409eff;
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 动画 */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from { transform: translateX(100%); }
|
||||||
|
to { transform: translateX(0); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+23
@@ -0,0 +1,23 @@
|
|||||||
|
declare module 'jordium-gantt-vue3' {
|
||||||
|
import { DefineComponent } from 'vue'
|
||||||
|
|
||||||
|
export const GanttChart: DefineComponent<any, any, any>
|
||||||
|
|
||||||
|
export interface Task {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
startDate: string
|
||||||
|
endDate: string
|
||||||
|
progress: number
|
||||||
|
predecessor?: number[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Milestone {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
date: string
|
||||||
|
type: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './App.vue';
|
||||||
|
import ElementPlus from 'element-plus';
|
||||||
|
import 'element-plus/theme-chalk/index.css';
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
app.use(ElementPlus);
|
||||||
|
app.mount('#app');
|
||||||
Vendored
+5
@@ -0,0 +1,5 @@
|
|||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue'
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"jsx": "preserve",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"strict": false,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
},
|
||||||
|
"typeRoots": ["./node_modules/@types", "./src"]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.d.ts",
|
||||||
|
"src/**/*.tsx",
|
||||||
|
"src/**/*.vue"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
const path = require('path');
|
||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
const { VueLoaderPlugin } = require('vue-loader');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: './src/main.js',
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
filename: 'bundle.js',
|
||||||
|
clean: true
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.vue$/,
|
||||||
|
loader: 'vue-loader'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.ts$/,
|
||||||
|
loader: 'ts-loader',
|
||||||
|
options: {
|
||||||
|
appendTsSuffixTo: [/\.vue$/],
|
||||||
|
transpileOnly: true
|
||||||
|
},
|
||||||
|
exclude: /node_modules/
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
'style-loader',
|
||||||
|
'css-loader'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new VueLoaderPlugin(),
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: './public/index.html'
|
||||||
|
})
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.ts', '.js', '.vue', '.json'],
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, 'src'),
|
||||||
|
'vue': path.resolve(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
devServer: {
|
||||||
|
static: {
|
||||||
|
directory: path.join(__dirname, 'public')
|
||||||
|
},
|
||||||
|
compress: true,
|
||||||
|
port: 8080,
|
||||||
|
hot: true
|
||||||
|
}
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user