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에서 지원을 잘 안해준다.
'FrontEnd > vue' 카테고리의 다른 글
vuex] action can change state one time (0) | 2020.01.10 |
---|---|
https://laracasts.com/discuss/channels/vue/vuex-store-is-not-a-constructor (0) | 2019.10.28 |
vue로 하려다가 실패한 것들 (0) | 2019.10.11 |
vue-if 와 vue-show (0) | 2019.08.17 |
vue-style-loader : cannot resolve "./listToStyles" (0) | 2019.08.16 |