如何使 webpack typescript 反应 webpack-dev-server 配置以自动构建和重新加载页面

Question

我的意图是这样的目录结构：

- /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 文件中，而无需手动重建它？

Answer 1

好的，我已经设法解决了我的问题，虽然不是很完美。

因为它看起来取决于 OS 和我想要精确的其他环境：我的 OS - windows7 我的编辑器 - VS Code。

首先，我想指出我的安装工作正常，无需任何调整。

但是当我从 VS Code 终端运行我的构建和启动命令时它不起作用。

为了完成这项工作，我必须打开两个单独的终端 windows，在第一个中我运行我的构建脚本，在第二个中我的启动脚本：

first Terminal > npm run build
second Terminal > npm run start

从 VS Code 的终端执行此操作的另一种方法是在那里发出这样的命令：

start npm run start && start npm run build

完全相同 - 在这些 windows.

中打开两个终端 windows 和运行s npm 命令

最后我创建了一个 run.bat 文件，我把这一行放在那里，现在我可以在 VS Code 和终端运行命令 "run" 和 webpack 和 webpack 中打开我的项目-dev-server 开始监视变化。

就是这样。如果有更好的方法，请指出，我愿意用更优雅的方法来解决它。

Answer 2

我在这里为任何可能偶然发现用于 react-webpack-typescript 开发的开发环境配置的人提供更完整和（更重要的）更正确的答案。不知何故，阅读文档对我来说还不够好，我不得不花一天多的时间来完成它。

所以我想获得捆绑的 javascript 文件比 html index.html 文件深一层的目录结构。查看完整目录结构的初始 post。

作为开发人员，我希望当我更改 /src 文件夹中的某些 .tsx 文件时，我的更改会反映在浏览器中，而且我们还需要重新编译捆绑的 .js 文件。出于这些目的，在项目的 package.json 文件的脚本块中创建了两个脚本：

  "scripts": {
    "start": "webpack-dev-server --content-base ./dist --hot --inline --colors --port 3000 --open",
    "build": "webpack --config webpack.config.js --watch",
  }

第一个启动 webpack-dev-server 提供根目录 /dist 供其服务，并提供 --hot --inline 键以自动重新加载浏览器页面并摆脱不必要的 iframe。还有 --port defined 和 auto page --open 当 webpack-dev-server 启动时。

第二个命令是通过 webpack 自动重建捆绑的 app.js 多亏了 --watch 键。

为了使这些命令按预期工作，应该在 webpack.config.js 中正确配置 webpack。对我来说（以及我后来看到的许多其他人）最微妙的部分是输出块的正确路径、publicPath 和文件名设置。我在 publicPath 中的初始 post 有一个错误，导致我的 webpack-dev-server 无法工作。

不工作的输出块是：

output: {
    filename: "app.js",
    publicPath: "/dist/",
    path: "./dist/build/"
}

有效的输出块是：

output: {
    filename: "app.js",
    publicPath: "/build/",
    path: "./dist/build/"
}

publicPath 属性被 webpack-dev-server 用来刷新浏览器页面，它应该设置为你编译的 .js 文件所在的目录，相对于根服务器目录，由--content-base 键在我的启动脚本中，指的是我项目中的 ./dist。所以正确的值是 /build/ 而不是 /dist/。

路径和文件名属性由 webpack 和命令放置在哪里以及如何命名捆绑的 .js 文件使用。在我的例子中，将创建 ./dist/build/app.js 文件。

还有一件事肯定存在于文档中，但我想在这里提到的是，当我用我的启动脚本启动我的 webpack-dev-server 但没有保存一些 .tsx 文件时运行构建命令（使 webpack 监视更改）我在浏览器中获得了更新的结果，但我捆绑的 app.js 文件未更改。这是因为 webpack-dev-server 只更新捆绑的 .js 文件的内存副本，而不是文件本身。为了同步我们需要用 webpack 重建包。

如果我希望我的捆绑 .js 文件与浏览器页面保持同步，我需要让 webpack 监视更改和 webpack-dev-server 来热重新加载页面，所以我运行两者"start" 和 "build" 脚本。但是我不能运行在我的 windows 开发机器上从一个命令提示符中同时使用它们，所以我运行它们分别与：

这仅适用于 windows!

start npm run start && start npm run build

为了方便起见，我将此行放入项目文件夹中的 run.bat 文件中。现在我可以在 VSCode 编辑器中打开 windows 终端并在那里发出命令 "run"。

到此为止。

Answer 3

使用当前版本的 webpack 工具，应该安装 webpack-cli (npm install webpack-cli --save-dev) 并使用：

webpack-cli serve --config ./webpack.config.js

如何使 webpack typescript 反应 webpack-dev-server 配置以自动构建和重新加载页面

how to make webpack typescript react webpack-dev-server configuration for auto building and reloading page

javascript

typescript

reactjs

webpack

webpack-dev-server