Vue3,Typescript and Webpack
Vue3 was released last month.
Composition API?
Typescript support?
Interesting, I am looking into how I can set up with webpack.
Source Code
This sumiki.us is build using jekyll blog engine and vue3 typescript webpack. See this repo for live demo. https://github.com/sumiki/sumiki.github.io.src Below is the minimum configuration I figure out.
package.json
This is the config I found out it works.
Minimum setup
{
"scripts": {
"watch": "webpack --config webpack.config.js --watch",
"build": "webpack --config webpack.config.js"
},
"dependencies": {
"vue": "^3.0.2"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.2",
"ts-loader": "^8.0.7",
"typescript": "^4.0.5",
"vue-loader": "^16.0.0-beta.9",
"webpack": "^5.3.2",
"webpack-cli": "^4.1.0"
}
}
webpack config
yarn watch
or yarn build
to compile.
webpack compiles typescript with vue-loader
and ts-loader
.
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
entry: {
index: ['./src/index.ts'],
portfolio: ['./src/portfolio.ts'],
},
output: {
path: path.resolve(__dirname, '../_assets/javascripts/'),
chunkFilename: '[name].js',
filename: '[name].js',
publicPath: '/javascripts/',
},
module: {
rules: [
{
test: /\.vue$/,
use: [
'vue-loader',
]
},
{
test: /\.ts$/,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
],
exclude: /node_modules/,
}
],
},
resolve: {
modules: [path.join(__dirname, 'src'), 'node_modules'],
alias: {
'@': path.join(__dirname, 'src'),
'vue': 'vue/dist/vue.esm-bundler.js',
},
extensions: [ '.tsx', '.ts', '.js' ],
},
plugins: [
new VueLoaderPlugin(),
]
};