webpack@next多页脚手架便捷配置typescript & vue-typescript & vue-class-typescript

对原有的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包需要安装在生产环境下。

其次需要在babel 中增加两个 proposal插件：

　　　　　"plugins": [
		["@babel/plugin-transform-runtime"],
		["@babel/proposal-decorators", { "legacy": true }],
    	　　　　　["@babel/proposal-class-properties", { "loose": true }]
	]

这样就可以使用ts + vue class的语法了

以一个弹窗pop组件为例：

 

vue-property-decorator主要用于使用ts语法对vue进行类型声明等，而vue-class-component则主要用于声明类式继承语法。
具体工程化项目详见：github：https://github.com/pomelott/webpack-multi-page-cli