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

Posted 2023-03-13

技术标签:

【中文标题】如何使 webpack typescript 响应 webpack-dev-server 配置以自动构建和重新加载页面【英文标题】：how to make webpack typescript react webpack-dev-server configuration for auto building and reloading page 【发布时间】：2017-04-26 23:07:36 【问题描述】：

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

- /my-project/
  -- /src/ (here are all .tsx files located)
  -- /dist/
     - index.html
     - /build/
        -bundle.js

 -- /node_modules/
 -- package.json
 -- tsconfig.json
 -- webpack.config.js

所以，我想要在 /dist 子目录中手动创建我的 index.html，并在其中包含 /build 子目录，其中 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”再次从终端手动重建 app.js 和 webpack。

如何改进我的工作流程以使 /src 文件夹中的更改自动反映在我的 dist/build/app.js 文件中，而无需手动重建它？

【问题讨论】：

您正在寻找的是（可能）热重载。 Dan Abramov 有一个react/hot reloading boilerplate repo，应该会有所帮助。我没有找到任何使用 Typescript 的好例子，但是 I have a project that is doing it that might help if you need direction. 【参考方案1】：

好的，所以我已经设法解决了我的问题，虽然并不完美。

看起来它取决于操作系统和其他环境，我想准确地说：我的操作系统 - windows7 我的编辑器 - VS Code。

首先我要指出的是，我的安装无需任何调整即可按我的需要运行。

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

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

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

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

start npm run start && start npm run build

完全一样 - 打开两个终端窗口并在这些窗口中运行 npm 命令。

最后我创建了一个 run.bat 文件，我在其中放置了这一行，现在我可以在 VS Code 中打开我的项目，并在终端运行命令“run”中，webpack 和 webpack-dev-server 开始观察变化。

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

【讨论】：

【参考方案2】：

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

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

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

  "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 定义和 webpack-dev-server 启动时自动页面 --open。

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

为了让这些命令按预期工作，应该在 webpack.config.js 中正确配置 webpack。对我（以及我后来看到的许多其他人）来说，最微妙的部分是输出块的正确路径、publicPath 和文件名设置。我在 publicPath 中的初始帖子中有一个错误，导致我的 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 watch 更改和 webpack-dev-server 以使页面热重载，因此我同时运行“start”和“build” “脚本。但是我不能在我的 Windows 开发机器上从一个命令提示符运行它们，所以我分别运行它们：

这仅对 windows 有效！

start npm run start && start npm run build

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

到此为止。

【讨论】：

酷，publicPath 设置搞砸了我的配置。我对此感到困惑。使用webpack-dev-server 时，它正在重新加载，因为我更改了我的.tsx 组件。然而，浏览器实际上并没有改变，即使我刷新了页面，组件也没有更新。所以我发现我还必须运行webpack --watch 才能真正重新编译bundle.js。但我想知道每次我更改磁盘上的文件时，webpack-dev-server 究竟会做出什么反应？【参考方案3】：

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

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

【讨论】：

以上是关于如何使 webpack typescript 响应 webpack-dev-server 配置以自动构建和重新加载页面的主要内容，如果未能解决你的问题，请参考以下文章

如何配置立即进行更改的 webpack 或 typescript？

如何在 Typescript 中使用 Webpack 'require' 和 'require.ensure'

如何使用 Webpack 对 Typescript 文件进行 Uglify

如何使用编译器包含的构建（Vue、Typescript、Webpack）

如何防止 jquery 使用 webpack 和 typescript 导入两次？

typescript 如何引入jquery