- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
目前,我正在努力让 HMR 在我的 Webpack 2 设置中工作。我将解释我的整个设置,因此我希望这足以让人们理解正在发生的事情。
我的项目结构:
config
dev.js
prod.js
dist
css
js
index.html
node_modules
src
components
// some JavaScript components
shared
stylesheets
index.js
.babelrc
package.json
webpack.config.js
这是我的 webpack.config.js
文件的内容,放置在我的项目的根目录中:
function buildConfig(env) {
return require('./config/' + env + '.js')(env)
}
module.exports = buildConfig;
因此,在此文件中,我可以选择将不同的环境传递给 buildConfig
函数。我使用此选项来使用不同的配置文件进行开发和生产。这是我的 package.json
文件中的内容:
{
"main": "index.js",
"scripts": {
"build:dev": "node_modules/.bin/webpack-dev-server --env=dev",
"build:prod": "node_modules/.bin/webpack -p --env=prod"
},
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-cli": "^6.18.0",
"babel-core": "^6.24.1",
"babel-loader": "^6.2.5",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "^2.1.0",
"json-loader": "^0.5.4",
"node-sass": "^3.13.1",
"postcss-loader": "^1.3.3",
"postcss-scss": "^0.4.1",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"babel-plugin-react-css-modules": "^2.6.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-hot-loader": "^3.0.0-beta.6",
"react-icons": "^2.2.1"
}
}
我的 package.json
中当然还有更多字段,但我不会在此处显示它们,因为它们不相关。
因此,在开发过程中,我在终端中运行 npm run build:dev
命令。这将使用 config
文件夹中的文件 dev.js
。这是 dev.js
文件的内容:
const webpack = require('webpack');
const { resolve } = require('path');
const context = resolve(__dirname, './../src');
module.exports = function(env) {
return {
context,
entry: {
app: [
'react-hot-loader/patch',
// activate HMR for React
'webpack-dev-server/client?http://localhost:3000',
// bundle the client for webpack-dev-server
// and connect to the provided endpoint
'webpack/hot/only-dev-server',
// bundle the client for hot reloading
// only- means to only hot reload for successful updates
'./index.js'
// the entry point of our app
]
},
output: {
path: resolve(__dirname, './../dist'), // `dist` is the destination
filename: '[name].js',
publicPath: '/js'
},
devServer: {
hot: true, // enable HMR on the server
inline: true,
contentBase: resolve(__dirname, './../dist'), // `__dirname` is root of the project
publicPath: '/js',
port: 3000
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.js$/, // Check for all js files
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
query: {
presets: ['latest', 'react'],
plugins: [
[
"react-css-modules",
{
context: __dirname + '/../src', // `__dirname` is root of project and `src` is source
"generateScopedName": "[name]__[local]___[hash:base64]",
"filetypes": {
".scss": "postcss-scss"
}
}
]
]
}
}]
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
importLoaders: 2,
localIdentName: '[name]__[local]___[hash:base64]'
}
},
'sass-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => {
return [
require('autoprefixer')
];
}
}
}
]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NamedModulesPlugin()
// prints more readable module names in the browser console on HMR updates
]
}
};
最后但并非最不重要的一点是我的 HMR 设置。我在我的 index.js
文件中进行了此设置:
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import TodoApp from './components/TodoApp';
import './stylesheets/Stylesheets.scss';
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.querySelector('#main')
);
};
render(TodoApp);
// Hot Module Replacement API
if (module.hot) {
module.hot.accept('./components/TodoApp', () => {
render(TodoApp)
});
}
因此,当我在浏览器中运行 npm start build:dev
并转到 http://localhost:3000
时,我看到我的网站按预期工作。这是控制台中的输出:
dev-server.js:49 [HMR] Waiting for update signal from WDS...
only-dev-server.js:66 [HMR] Waiting for update signal from WDS...
TodoApp.js:102 test
client?344c:41 [WDS] Hot Module Replacement enabled.
test
文本来 self 的 TodoApp
组件中的渲染函数。这个函数看起来像这样:
render() {
console.log('test');
return(
<div styleName="TodoApp">
<TodoForm addTodo={this.addTodo} />
<TodoList todos={this.state.todos} deleteTodo={this.deleteTodo} toggleDone={this.toggleDone} updateTodo={this.updateTodo} />
</div>
);
}
所以,现在是重要的事情了。我更新了此渲染函数的返回值,这应该会触发 HMR 启动。我将渲染函数更改为此。
render() {
console.log('test');
return(
<div styleName="TodoApp">
<p>Hi Stackoverflow</p>
<TodoForm addTodo={this.addTodo} />
<TodoList todos={this.state.todos} deleteTodo={this.deleteTodo} toggleDone={this.toggleDone} updateTodo={this.updateTodo} />
</div>
);
}
这是我在控制台中得到的输出:
client?344c:41 [WDS] App updated. Recompiling...
client?344c:41 [WDS] App hot update...
dev-server.js:45 [HMR] Checking for updates on the server...
TodoApp.js:102 test
log-apply-result.js:20 [HMR] Updated modules:
log-apply-result.js:22 [HMR] - ./components/TodoApp.js
dev-server.js:27 [HMR] App is up to date.
你会说这很好。 但我的网站没有更新任何内容。
然后我将 index.js
中的 HMR 代码更改为:
// Hot Module Replacement API
if (module.hot) {
module.hot.accept();
}
而且它有效。我就是不明白。如果这是我的 HMR 代码,为什么它不起作用:
// Hot Module Replacement API
if (module.hot) {
module.hot.accept('./components/TodoApp', () => {
render(TodoApp)
});
}
顺便说一句,此设置基于 https://webpack.js.org/guides/hmr-react/ 中的设置
希望大家能够帮助我。如果有人需要更多信息,请随时询问。提前致谢!
更新
忘记发布我的 .babelrc
文件。就是这样:
{
"presets": [
["es2015", {"modules": false}],
// webpack understands the native import syntax, and uses it for tree shaking
"react"
// Transpile React components to JavaScript
],
"plugins": [
"react-hot-loader/babel"
// EnablesReact code to work with HMR.
]
}
最佳答案
导入是静态的,在 module.hot.accept
中识别出更新后,您会再次渲染完全相同的组件,因为 TodoApp
仍然保留旧版本您的模块和 HMR 会意识到这一点,并且不会刷新或更改您应用中的任何内容。
您想使用Dynamic import: import()
。要使其与 babel 一起使用,您需要添加 babel-plugin-syntax-dynamic-import ,否则它将报告语法错误,因为它不希望 import
用作函数。如果您在 webpack 配置中使用 react-hot-loader/patch
,则不需要 react-hot-loader/babel
,因此您的插件位于 .babelrc 中
变成:
"plugins": [
"syntax-dynamic-import"
]
在您的 render()
函数中,您现在可以导入 TodoApp
并渲染它。
const render = () => {
import('./components/TodoApp').then(({ default: Component }) => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.querySelector('#main')
);
});
};
render();
// Hot Module Replacement API
if (module.hot) {
module.hot.accept('./components/TodoApp', render);
}
import()
是一个将通过模块解析的 promise ,并且您希望使用default
导出。
尽管上述内容是正确的,但 webpack 文档并不要求您使用动态导入,因为 webpack 可以开箱即用地处理 ES 模块,这也在 react-hot-loader
docs - Webpack 2 中进行了描述。 ,并且因为 webpack 也在处理 HMR,所以它会知道在这种情况下该怎么做。为此,您不得将模块转换为 commonjs。您使用 ["es2015", {"modules": false}]
完成此操作,但您还在 webpack 配置中配置了 latest
预设,这也会转换模块。为了避免混淆,您应该将所有 babel 配置放在 .babelrc
中,而不是将一些配置拆分到加载器选项中。
从 webpack 配置中完全删除 babel-loader
中的预设,它将正常工作,因为您的 .babelrc
中已经有必要的预设。 babel-preset-latest
已弃用,如果您想使用这些功能,您应该开始使用 babel-preset-env
它也取代了 es2015。因此,您在 .babelrc 中的预设将是:
"presets": [
["env", {"modules": false}],
"react"
],
关于reactjs - 无法让 Webpack 2 HMR React 工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43491310/
HMR API 的 webpack 文档提到了以下方法: accept(dependencies: string[], callback: (updatedDependencies) => void)
这是我页面的初始加载: 在更改了一些文本后,HMR 被激活,但附加 DOM 而不是替换它: 有人知道是什么导致了这个问题吗?控制台上没有错误。 更新: 我在命令行中使用了 ASP.NET Core w
Minimalistic repository for problem testing 我现在有最简单的项目结构: root |-src --|index.pug --|-
我正在尝试运行一个简单的webpack-dev-server,如果相关源JavaScript文件已更改,它会在请求时编译.bundle.js文件。我目前不想启用热模块更换 (HMR)。 我的服务器正在
加载后一切正常,hmr 正在工作。然后就出现这个错误。 GET http://localhost:3000/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCO
我环顾四周,但无法获得我在 stackoverflow 上看到的任何答案。 我无法使用 webpack 或 webpack dev-server 的命令行;我只能使用 Node API。 下面是我是如
我有一个与 webpack 捆绑在一起的 Express 服务器应用程序。客户端也与 webpack 捆绑在一起,并由服务器在开发模式下使用 webpack-dev-middleware 和 webp
我有使用 Typescript、ReactJS 和 Webpack 构建的前端应用程序。 我正在尝试启用 HMR。 这些是启动脚本 "build": "NODE_ENV=production $(np
有什么方法可以忽略 HMR 上的日志吗?进行多次更改后,这非常烦人,因为控制台变得巨大,而且也很难跟踪自定义日志。 这是执行日志记录的 HMR 模块的 log-apply-result.js 中的代码
我一直在玩弄 Webpack 的不同功能,并且正在慢慢理解。 典型的控制台输出: [WDS] App updated. Recompiling... [WDS] App hot update... [
我已成功设置 HMR,一切正常,包括代理后端站点。剩下的唯一问题是,除非我完全重新加载,否则我无法在浏览器中看到实际的原始代码 (ES2015)。 我是不是漏掉了什么或者这是不可能的?我使用 'che
我想在我的 React 应用程序中使用 Webpack HMR。我的 webpack 配置如下所示: var path = require('path'); var ExtractTextPlugin
我正在使用 webpack-dev-server 进行热模块替换。它工作得很好,但是这个错误每隔几秒就会出现在控制台中:GET http://mysite:8080/__webpack_hmr 404
有人知道当 Webpack 在热模式下运行时如何从 HTML Webpack 插件保存 HTML 页面吗?它在内存中保存文件,我想将它们保存到文件系统中。谢谢。 最佳答案 我用过 html-webpa
一个简单的 webpack 配置但不起作用: var path = require("path"); var HtmlWebpackPlugin = require('html-webpack-plu
我目前正在使用带有 ngrx 的 angular-cli 项目 (1.0.0-beta.25.5) 来管理状态。我关注了this article并设法让热模块更换正常工作,但是我还没有找到一种方法来在
我从 Webpack 收到以下错误: 无效的 HMR 消息后跟一串非常详细的 JSON。 我真的找不到任何资源来更好地调试它。有什么建议吗? 如果有人能告诉我为什么在整个应用程序中使用 require
我正在尝试新的 bun平台 (v0.1.6) 与 Hono . 我遵循的步骤: bun create hono test-api cd test-api bun dev 然后服务器显示这条信息: $
我正在尝试设置 webpack 的开发服务器和 HMR 以与 Shopify 主题开发一起使用。运行服务器并打开本地 IP 时,我从 Shopify 的 DNS 提供商 CloudFlare 收到此错
我试图让 HMR 与 webpack v5 一起运行,但它不起作用。当我修改并保存文件时,webpack 会正确重新编译项目,但前端没有更新。 我阅读了这篇文章并按照说明操作:https://webp
我是一名优秀的程序员,十分优秀!