对原有的1.x版本进行的大版本的升级。本多页脚手架面向实际工作流，能够覆盖绝大多数的使用场景，在实际工作中，能结合的应用场景会更加多元化。
github：https://github.com/pomelott/webpack-multi-page-cli
如对您有帮助，请给星，如有问题请提issue。
webpack手动接入ts需要以下几个方面：
一、使webpack能够识别ts并利用ts编译器编译成js文件
二、使vue等框架接入ts文件（以vue为例）
1. vue的script标签中可使用ts
2. vue能够识别ts的声明信息
3. vue组件中可以引入并识别纯.ts文件
4. vue的class式写法能够识别ts
以下分部解决：
一、使webpack能够识别ts并利用ts编译器编译成js文件
npm install typescript ts-loader --save-dev
然后再webpack中设置loader
{
test: /\.tsx?$/,
loader: ‘ts-loader‘,
exclude: ‘/node_modules/‘,
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
设置无后缀文件的识别顺序：
extensions: [‘.ts‘, ‘.tsx‘, ‘.js‘, ‘.vue‘, ‘.json‘]
根目录下添加 tsconfig.json 文件：
// tsconfig.json
{
"compilerOptions": {
// 与 Vue 的浏览器支持保持一致
"target": "es5",
// 这可以对 `this` 上的数据 property 进行更严格的推断
"strict": true,
// 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true
}
}
二、使vue等框架接入ts文件
根目录下创建 vue-shims.d.ts 文件，为vue声明，使ts能够是被.vue文件
declare module ‘*.vue‘ {
import Vue from ‘vue‘;
export default Vue;
}
此处需要注意，在script标签上要指明lang=“ts”, 且在引入vue组件时需要指明.vue的后缀名。
其次需要在使用class语法的时候能够识别ts：
npm install --save vue vue-class-component vue-property-decorator
注意，以上两个npm包需要安装在生产环境下。这样就可以使用ts + vue class的语法了
以一个弹窗pop组件为例：
<template>
<div class="pop-bg flex v-center h-center" :style="{display: showFlag}" >
<div class="pop-inter flex v-center h-center" :class="showPopClass">
<div class="pop-cnt">
<div class="topic">{{topic}}</div>
<div class="sub-title mt20 mb50" v-html="finalTitle"></div>
<button @click="closePop">close</button>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from ‘vue‘
// import Component from ‘vue-class-component‘
import {Component, Prop} from ‘vue-property-decorator‘
@Component({})
export default class Pop extends Vue {
@Prop({
type: String,
required: true
}) topic!: String
// initial data
title = ‘this vue file was <br> written with vue-class-component‘;
showPopClass: String = ‘‘;
showFlag: string = ‘none‘;
// lifecycle hook
mounted () {
console.log(‘vue-class-component mounted !‘)
}
// computed
get finalTitle () {
return this.title + ‘ and TS.‘
}
// method
public async pop():Promise<void> {
console.log(‘pop‘)
this.showFlag = ‘flex‘;
await this.$nextTick();
this.showPopClass = ‘animate__animated animate__bounceInUp‘
// alert(‘greeting: ‘ + this.msg)
}
closePop () {
this.showFlag = ‘none‘;
}
}
</script>
<style lang="scss">
div.pop-bg{
background: rgba(0,0,0, .7);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
display: none;
.pop-inter{
width: 400px;
height: 400px;
background: #fff;
border-radius: 10px;
.pop-cnt{
background: #fff;
button{
padding: 10px 28px;
}
}
.topic{
font-size: 26px;
}
.sub-title{
font-size: 14px;
color: #999;
}
}
}
</style>
vue-property-decorator主要用于使用ts语法对vue进行类型声明等，而vue-class-component则主要用于声明类式继承语法。
具体工程化项目详见：github：https://github.com/pomelott/webpack-multi-page-cli
webpack@next多页脚手架便捷配置typescript & vue-typescript & vue-class-typescript
原文：https://www.cnblogs.com/pomelott/p/13022229.html