极客观点
项目管理
HarmonyOS
我的意图是有这样的目录结构：
- /my-project/
-- /src/ (here are all .tsx files located)
-- /dist/
- index.html
- /build/
-bundle.js
-- /node_modules/
-- package.json
-- tsconfig.json
-- webpack.config.js
所以，我想要我的 index.html，它是在 /dist 子目录中手动创建的，在它里面我想要 /build subdir，webpack 制作的 app.js 所在的位置。
我希望当我保存位于 /src 目录中的一些 .tsx 文件时，webpack 会自动重建 app.js 并且 webpack-dev-server 会自动反映更改。
我的 package.json 看起来像这样：
{
"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"
}
}
我的 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'}
]
}
}
我的 index.html ：
<!DOCTYPE html>
<html>
<body>
<div id="app-container"></div>
</body>
<script src="./build/app.js"></script>
</html>
我的 index.tsx 文件如下所示：
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();
我已经对终端执行了命令：
npm run build
npm run start
所以 app.js 被创建并且 webpack-dev-server 开始工作并在浏览器中打开页面。到目前为止一切顺利。但是当我更改 index.tsx 中的文本并保存此文件时没有任何变化，我尝试刷新浏览器页面，文本保持不变并且 app.js 没有重建。要更改文本，我必须通过发出“npm run build”从终端再次手动用 webpack 重建 app.js。
如何改进我的工作流程，使 /src 文件夹中的更改自动反映在我的 dist/build/app.js 文件中，而无需手动重建它？
原文由 AndreyKo 发布，翻译遵循 CC BY-SA 4.0 许可协议
我在这里为任何可能偶然发现用于 react-webpack-typescript 开发的开发环境配置的人提供更完整和（更重要的）更正确的答案。不知何故，阅读文档对我来说还不够好，我不得不花一天多的时间才能让它发挥作用。
所以我想获得目录结构，其中捆绑的 javascript 文件比 html index.html 文件更深一层。查看完整目录结构的初始帖子。
作为一名开发人员，我希望当我更改 /src 文件夹中的一些 .tsx 文件时，我的更改会反映在浏览器中，而且我们还需要重新编译捆绑的 .js 文件。出于这些目的，在项目的 package.json 文件的脚本块中创建了两个脚本：
第一个启动 webpack-dev-server 提供根目录 /dist 供其服务，并提供 –hot –inline 键以自动重新加载浏览器页面并摆脱不必要的 iframe。当 webpack-dev-server 启动时，还有 –port defined 和 auto page –open 。
由于 –watch 键，第二个命令用于通过 webpack 自动重建捆绑的 app.js。
为了使这些命令按预期工作，应该在 webpack.config.js 中正确配置 webpack。对我来说（以及我后来看到的许多其他人）最微妙的部分是输出块的正确路径、publicPath 和文件名设置。我在 publicPath 中的初始帖子中存在错误，导致我的 webpack-dev-server 无法正常工作。
不工作的输出块是：
有效的输出块是：
publicPath 属性被 webpack-dev-server 用来刷新浏览器页面，它应该设置为你编译的 .js 文件所在的目录，该目录相对于根服务器目录，该目录由 –content-base key 在我开始时设置脚本并在我的项目中引用./dist。所以正确的值是 /build/ 而不是 /dist/。
path 和 filename 属性由 webpack 和命令放置在哪里以及如何命名捆绑的 .js 文件使用。在我的例子中，将创建 ./dist/build/app.js 文件。
文档中肯定存在的另一件事，但我想在这里提到的是，当我用我的启动脚本启动我的 webpack-dev-server 但没有运行构建命令（这使得webpack watch changes) 我在浏览器中得到了更新的结果，但我捆绑的 app.js 文件没有改变。这是因为 webpack-dev-server 只更新捆绑的 .js 文件的内存副本，而不是文件本身。为了同步，我们需要用 webpack 重建包。
如果我希望我的捆绑 .js 文件与浏览器页面保持同步，我需要让 webpack 监视更改和 webpack-dev-server 来热重新加载页面，所以我同时运行“开始”和“构建”脚本。但是我不能在我的 Windows 开发机器上从一个命令提示符运行它们，所以我分别运行它们：
这仅适用于Windows！
为了方便起见，我将此行放入项目文件夹中的 run.bat 文件中。现在我可以在 VSCode 编辑器中打开 Windows 终端并在那里发出命令“运行”。
就这样吧。