module.exports = {
    mode: "development",
    entry: {
        app: "./main.ts"
    },
    resolve: {
        extensions: ["vue", "ts", "js", "json"],
        alias: {
            "vue$": path.join(distRoot, "vue.esm.js"),
            // "@": "./"
        }
    },
    externals: {
        'vue': {
            commonjs: 'vue',
            commonjs2: 'vue',
            amd: 'vue',
            root: 'Vue'
        },
    },

    output: {
        path: distRoot,
        filename: `[name]-dist`.ts
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
              },
              {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                  appendTsSuffixTo: [/\.vue$/],
                }
              },
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

.vue 파일은 js가 아니므로 loader가 필요 하다.
bash npm i vue-loader
vue-loader를 쓰려면 vue-template-compiler가 필요하다.

vue와 vue-template-compiler는 버전이 같아야 한다.
bash npm i vue-loader
vue-loader를 webpack에서 쓰려면 VueLoaderPlugin이 필요하다.
const {VueLoaderPlugin} = require("vue-loader")
선언하고 plugins에 추가한다.

현재 vscode에서 vue module을 찾지 못한다.
vue-shim.d.ts 파일에 추가한다. 없으면 만든다.

declare module "*.vue"
{
    import Vue from "vue"
    export default Vue
}

이렇게 해도

Module not found: Error: Can't resolve 'vue' in

라는 에러가 뜬다.

externals: {
  'vue': {
    commonjs:  'vue',
    commonjs2:  'vue',
    amd:  'vue',
    root:  'Vue'
  }
}

webpack에 추가한다.
vue는 react보다 typescript와 webpack에서 지원을 잘 안해준다.

+ Recent posts