自己搭建webpac脚手架

配合 webpack 使用
npm install webpack ts-loader typescript webpack-cli --save-dev

pagejson
scripts的 "start": "webpack",

vue
Step 1 : 增加vue需要的依赖

``` shell
# Vue 的依赖
npm i vue@next --save
npm i -D @vue/compiler-sfc
# yarn add vue@next
# yarn add -D @vue/compiler-sfc

# Vue的loader
npm i vue-loader --save-dev
# yarn add vue-loader -D

npm i webpack-dev-server html-webpack-plugin --save-dev

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // webpack 自带内部插件
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
entry: {
index: './src/main.ts', // 输入
},
mode: 'development', // 开发
module: {
rules: [
{
test: /\.tsx?$/, // 处理.tsx文件
loader: 'ts-loader', // 使用 ts-loader打包编译ts文件
options: {
appendTsSuffixTo: [/\.vue$/],
},
exclude: /node_modules/, // 不处理node_modules文件夹的.ts文件
},
{
test: /\.vue$/,
loader: 'vue-loader',
}
]
},
resolve: {
extensions: ['.tsc', '.ts', '.js'], // 从哪些扩展名中找文件
},
output: {
filename: 'bundle.[name].js', // 输出
path: path.resolve(__dirname, 'dist'), // __dirname 当前目录
},
devServer: {
// contentBase: path.resolve(__dirname, 'dist'),
// contentBase: './dist',
// port: 3020,
// hot: "only",
// static: false,
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'index.html')
}),
new VueLoaderPlugin(),
]
}