Skip to content

Instantly share code, notes, and snippets.

Last active Jan 14, 2020
What would you like to do?
TypeScript, VueJS and JSX webpack configuration
"presets": [],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs"]
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 \
"compilerOptions": {
"jsx": "preserve",
"module": "commonjs",
"moduleResolution": "node",
"outDir": "bin/",
"sourceMap": true,
"removeComments": true,
"target": "es5"
"include": [
"files": [
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 : []

This comment has been minimized.

Copy link
Owner Author

@SeanJM SeanJM commented Nov 15, 2016

It should be noted, that even though webpack will take in the entry point and the application will compile without errors, linting the code will throw warnings about the --jsx flag missing unless the entry point is supplied in the tsconfig.json.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment