support for VS2019+ build option
- Dominant language
- JavaScript
- Stars
- 4.8k
- Forks
- 456
- Avg merge
- 9h 19m
- Merged PRs (30d)
- 2
Description
Hi everyone,
I am new in react, node.js and all this world...
I am building my first application with VS2019. Well, when I use babel-loader I cannot build my application using VS2019 IDE. I must build it via command prompt, then run it from Visual studio.
At the moment I have solved installing ts-loader, even if I do not need it.
I try to explain myself better:
I have created a nodejs project in VS2019. Here my `package.json`:
```
{
...
"dependencies": {
"@babel/core": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"express": "^4.17.1",
"html-webpack-plugin": "^5.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"ts-loader": "^9.2.5", <---- this is the workaround. I do not need it
"webpack": "^5.49.0",
"webpack-cli": "^4.7.2"
},
"scripts": {
"clean": "",
"build": "webpack-cli ./src/index.jsx --config webpack.config.js"
}
}
```
Then I have added `webpack.config.js`:
```
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
watch: false,
entry: './src/app.tsx',
mode: 'development',
output: {
filename: './app.js'
,
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-react']
]
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
```
Finally, I have all file I need for my application.
Well, everytime I modify my application, I should open the console and run the command `npx webpack`, then files in dist folder are generated. So, I come back to VS2019 and I run my application.
I would like avoiding write manually the command to build the application and build it when I click on 'rebuild' on VS2019
[VS2019 Rebuild command](https://i.stack.imgur.com/hKmtv.png)
Now I have solved installing ts-loader. But what is wrong in my configuration? Or is not possible do it with babel?
Thank you
Contributor guide
Research direction
Start with package.json and webpack.config.js, then compare the VS2019 Rebuild command with the current npx webpack workflow. The issue is done when rebuilding from VS2019 invokes the webpack build without requiring the ts-loader workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, node.js, react, typescript, webpack
- Domain
- build-system, frontend, tooling
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100