标签: webpack-hmr

我正在使用sails.js进行一个项目并做出反应.我希望能够使用Webpack的热模块替换,这样我就可以编辑我的代码并立即在浏览器上进行更改.但是,我怎么能把它连接起来似乎并不明显.

我希望能够使用$ sails lift并让它完全正常工作.

如果这是一个node.js项目,我只需配置webpack即可使用react-transform-hmr并webpack-dev-server从package.json 开始(例如,如此处所述).但是,这似乎不是一个非常风帆的东西.

我看到模块webpack-hot-middleware声称能够"在没有的情况下将热重新加载到现有服务器中webpack-dev-server".但是,我不确定在Sails> 0.10中添加Express中间件配置的适当位置.

任何人都可以推荐一个好的方法来设置它吗？

Webpack dev服务器由于未知原因而自举两次.(请注意,只有dev-server有这个问题,如果我捆绑文件,一切运行正常).

我看到这行执行了两次:

// Load entry module and return exports
  return hotCreateRequire(790)(__webpack_require__.s = 790); 

我也可以在浏览器日志中看到这一行:

[HMR] Waiting for update signal from WDS...

这些是使用过的版本

"webpack": "^2.1.0-beta.21"
"webpack-dev-server": "^2.1.0-beta.4",

我想在运行命令时进行热重新加载npm run watch.(我希望它在使用vue-cli时工作- 当你运行npm run dev命令时:https://vue-loader.vuejs.org/en/features/hot-reload.html).

所以,我已经安装了webpack-dev-server,这就是我尝试过的:

package.json:

{
  "name": "webpack-learning",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack",
    "watch": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "cross-env": "^5.0.0",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "node-sass": "^4.5.2",
    "purifycss-webpack": "^0.6.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.17.0",
    "webpack": "^2.4.1", …

我已经建立了一个包含2个条目的Webpack项目.我可以连接到开发服务器,没有错误消息.但是,当我更改其中一个条目文件时,Webpack重新编译(没有任何错误),客户端会注意到并尝试获取JSON,但不存在.连接到dev服务器后,这是完整的日志:

  [HMR] Waiting for update signal from WDS...
  main.js:20 [WDS] Hot Module Replacement enabled.
2 main.js:20 [WDS] App updated. Recompiling...
  main.js:20 [WDS] App hot update...
  main.js:20 [HMR] Checking for updates on the server...
  main.js:1 GET http://localhost:8080/68003e2dfaa592e9b4dc.hot-update.json 404 (Not Found)
  main.js:20 [HMR] Cannot find update. Need to do a full reload!
  main.js:20 [HMR] (Probably because of restarting the webpack-dev-server)

我没有重启dev服务器......

这是我的配置:

const path = require("path")
const webpack = require("webpack")

var buildEntryPoint = function(entryPoint){
  return [
    entryPoint,
    'webpack/hot/only-dev-server',
    'webpack-dev-server/client?http://localhost:8080'
  ]
}

module.exports …

所以这是一个问题，当前我正在从事一个前端与后端紧密耦合的项目。该应用程序的旧版本是使用.JSP文件构建的，索引文件是index.JSP文件。

我当前的任务是为Vue中的新前端编写一个开发环境，并使用webpack开发服务器来提供新内容，并将捆绑软件注入index.jsp文件中。那就是我陷入困境的地方，我不知道将Webpack开发服务器或HtmlWebpackPlugin脚本标签注入JSP文件的任何方法。

任何帮助将不胜感激，因为我确实对此感到困惑。

我有一个奇怪的问题:

我正在使用Webpack(使用Vue-CLI)+ HMR.当我尝试在DevTools中更改浏览器中的样式时,我的页面本身会更改样式 - 它会删除其中一些样式(下面的屏幕截图).

我知道问题出现在Hot Reload Webpack中,因为某些Vue-Components样式仍然存在,有些样式被删除.因此我无法更改侧边栏中的样式,每次都必须重新加载页面才能使样式恢复原状.

下面是我的package.json和webpack.base.conf.js.

先感谢您!

PS我也使用SASS与SASS-Loader.

的package.json

{
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "bootstrap": "^4.0.0",
    "desandro-classie": "^1.0.1",
    "desandro-get-style-property": "^1.0.4",
    "draggabilly": "^2.1.1",
    "jquery": "^3.2.1",
    "jquery-parallax.js": "^1.5.0",
    "popper.js": "^1.12.9",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0", …

我正在开发一个简单的静态 HTML 网站。现在，只有一个 html 文件，index.html。使用 Webpack 3.10.0。我已经配置了 HMR。

当我对其中一个样式表进行更改时，它会按预期重新编译和重新加载：

[WDS] App updated. Recompiling...
client?5cf9:222 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
log.js:23 [HMR] Updated modules:
log.js:15 [HMR]  - ./src/styles/app.scss
log.js:23 [HMR] App is up to date.

但是当我对index.html进行更改时，chrome控制台说它正在重新编译，但在重新编译结束时它说“没有热更新”：

[WDS] App updated. Recompiling...
client?5cf9:222 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
log.js:23 [HMR] Nothing hot updated.
log.js:23 [HMR] App is up to date.

我使用单独的 dev 和 prod webpack 配置文件，并将通用的配置文件合并到每个配置文件中。常见的是这样的：

const path = …

我正在尝试使用downgradeModule策略在混合角度应用程序上实现HMR，但是它失败了。我来自另一个问题，Angular 5 / 1.x混合应用程序可以支持HMR吗？因为没有可接受的答案，我认为@scipper答案无法工作（下面的解释）。
我使用HMR（添加new webpack.HotModuleReplacementPlugin()，添加的内容devServer.hot:true和其他内容）设置了webpack配置（不是ng-cli，自定义配置），我可以看到它正在工作，我的输入文件正在重新加载，而没有用新的源重新加载整个页面，并且webpack应用了热更新很好，但是angular和angularjs应用程序无法正常工作（使用旧的缓存代码）。
我的计划是：
1）将模块hot accept添加到条目文件。
2）销毁angular.js应用程序（如果存在）（使用$ rootScope destroy？）。
3）销毁根angular.js应用节点（如果存在）。
4）使用类似的代码构建Angular模块

// bootstrap you new Angular 7 main module
const bootstrapFn = (extraProviders) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(MyAngularSevenModule);
};
const downgradedModule = downgradeModule(bootstrapFn);

5）调用或重新调用angularjs模块和依赖项+我的angular模块-这是我认为的主要问题。
6）引导angularjs应用程序（或$ compile + $ digest）。

已经尝试过：
- https://github.com/PatrickJS/angular-hmr -不会因为downgradeModule战略的工作（根节点是AJS）。
- https://github.com/vitaliy-bobrov/angular-hot-loader -很多，因为供应商和其他拦截器的错误都没有实现。
- https://github.com/noppa/ng-hot-reload

我以为引导程序会更新缓存的角度实体，但是在hmr重装角度之后，将使用旧的控制器/组件/指令（在“源”选项卡中使用新代码）。
有什么建议么？

我正在使用handlebars-loader：

  {
    test: /\.hbs$/,
    loader: 'handlebars-loader',
  }

我也在使用html-webpack-plugin。

使用Webpack Dev Server，一切都能按我的意愿进行：

如果保存了对车把模板或SCSS文件的更改，则会自动重新加载页面。

但是，一旦我能hot: true下devServer，HMR开始对SCSS变化工作（即CSS地没有全部重新加载更新），这是我想要的，但如果我改变车把模板，HMR不工作，和常规的“热重载”（即重新加载整个页面）也停止工作。

有任何想法吗？

如果HMR适用于SCSS更改，并且对把手模板进行常规的“热重载”（没有，该方法已经可以使用hot: true），那也很好。

我可以在 webpack 中对 JS 和 SCSS 文件使用热模块替换，并且工作正常，但在尝试热重新加载 html 文件时遇到问题。对我有用的另一个选项是将“watchContentBase：true”属性添加到我的开发服务器属性中，但这会重新加载浏览器。我想要拥有它，这样当我保存文件时，浏览器会更新其内容，而无需完全重新加载页面。

<pre>
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        port: 8080,
        contentBase: path.resolve(__dirname, './src'),
        hot: true,
        open: true,
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.html$/i,
                loader: …