Skip to content

Instantly share code, notes, and snippets.

@SeanJM
Last active January 14, 2020 03:03
Show Gist options
  • Save SeanJM/263f9dda94ed6e9bf4323bd0b136de73 to your computer and use it in GitHub Desktop.
Save SeanJM/263f9dda94ed6e9bf4323bd0b136de73 to your computer and use it in GitHub Desktop.
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 \
babel-helper-vue-jsx-merge-props
{
"compilerOptions": {
"jsx": "preserve",
"module": "commonjs",
"moduleResolution": "node",
"outDir": "bin/",
"sourceMap": true,
"removeComments": true,
"target": "es5"
},
"include": [
"src/**/*"
],
"files": [
"src/app.tsx"
]
}
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 : []
};
@SeanJM
Copy link
Author

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