TypeScript, VueJS and JSX webpack configuration
module.exports = {
entry: "./src/app.tsx",
output: {
filename: "bin/bundle.js"
},
resolve: {
// Add '.ts' and '.tsx' as a resolvable extension.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
// It's important to run 'babel' first this will avoid a compilation error
{ test: /\.tsx?$/, loader: "babel" },
// Run ts loader to transform our typescript into JS
{ test: /\.tsx?$/, loader: "ts-loader" }
]
},
// If you want to load 'vue' as an external, and not include it in your bundle
// simply add it to the array.
externals : []
};
{
"compilerOptions": {
"jsx": "preserve",
"module": "commonjs",
"moduleResolution": "node",
"outDir": "bin/",
"sourceMap": true,
"removeComments": true,
"target": "es5"
},
"include": [
"src/**/*"
],
"files": [
"src/app.tsx"
]
}
npm i -S \
@types/core-js \
vue \
typescript \
ts-loader \
webpack \
babel \
babel-core \
babel-loader \
babel-plugin-syntax-jsx \
babel-plugin-transform-es2015-modules-commonjs \
babel-plugin-transform-vue-jsx \
babel-helper-vue-jsx-merge-props
{
"presets": [],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs"]
}