Menu
My intention is to have such directory structure:
- /my-project/
-- /src/ (here are all .tsx files located)
-- /dist/
- index.html
- /build/
-bundle.js
-- /node_modules/
-- package.json
-- tsconfig.json
-- webpack.config.js
So, I want to have my index.html which is made manually in the /dist subdirectory and inside of it I want to have /build subdir where the app.js made by webpack goes.
And I want when I'm saving some .tsx file located in my /src dir webpack automatically rebuild app.js and webpack-dev-server automatically reflect the changes.
My package.json looks like this:
{
"name": "my-project",
"version": "1.0.0",
"description": "My first React App",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --content-base ./dist --hot --inline --colors --port 3000 --open",
"build": "webpack --config webpack.config.js --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "AndreyKo",
"license": "ISC",
"devDependencies": {
"@types/react": "^0.14.54",
"@types/react-dom": "^0.14.19",
"jquery": "^3.1.1",
"source-map-loader": "^0.1.5",
"ts-loader": "^1.3.0",
"typescript": "^2.1.4",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1"
}
}
My webpack.config.js:
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "app.js",
publicPath: "/dist/",
path: "./dist/build/"
},
dev_tool: "source-map",
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{test: /\.tsx?$/, loader: 'ts-loader'}
],
preloaders: [
{test: /\.js$/, loader: 'source-map-loader'}
]
}
}
My index.html:
<!DOCTYPE html>
<html>
<body>
<div id="app-container"></div>
</body>
<script src="./build/app.js"></script>
</html>
And my index.tsx file looks like this:
import * as jQuery from 'jquery';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function appOutput() {
ReactDOM.render(<div>Hello, we are talking from React!</div>, document.getElementById("app-container"));
}
appOutput();
I've done commands to the terminal:
npm run build
npm run start
So the app.js was created and webpack-dev-server started working and opened page in the browser. Everything goes fine by far. But when I change the text in my index.tsx and save this file nothing changes, I tried to refresh the browser page, the text remains the same and app.js is not rebuilt. To make the text change I have to rebuild app.js with webpack by hand again from the terminal by issuing "npm run build".
How to improve my workflow to make the changes in my /src folder be reflected automatically in my dist/build/app.js file without having to manually rebuild it?
679
Ok, so I've managed to solve my problem though not perfectly.
As it looks like it depends of the OS and other environment I want to be precise: my OS - windows7 my editor - VS Code.
First of all I'd like to note that my installation works as I needed without any adjustments.
But it doesn't work when I run my build and start commands from the VS Code terminal.
To make this work I had to open two separate terminal windows and in the first of them I run my build script and in the second my start script:
first Terminal > npm run build
second Terminal > npm run start
Another way of doing this right from VS Code's terminal is to issue there such command:
start npm run start && start npm run build
which does absolutely the same - opens two terminal windows and runs npm commands in these windows.
Finally I made a run.bat file where I put this line and now I can just open my project in VS Code and in the terminal run command "run" and webpack and webpack-dev-server start watching for changes.
That's it. If there are better ways, please point me out, I'm opened to more elegant ways to solve it.
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With