babel / babel/babel-loader

support for VS2019+ build option

Open
#914 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.