3098人阅读
项目构建（16）
错误1：找不到__webpack_hmr
在webpack的entry配置添加引用路径’webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true’，相关的参数最好不要省略，否则会出现无法自动刷新的问题。处理脚本如下：
let hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true',
wpConfig = require('./webpack.config'),
entries = Object.keys(wpConfig.entry)
entries.forEach((key) =& {
wpConfig.entry[key].push(hotMiddlewareScript);
if(wpConfig.plugins === undefined) {
wpConfig.plugins = []
wpConfig.plugins.push(
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin())
main.bundle.js:30 GET http://127.0.0.1/static/a86cea5670.hot-update.json 404 (Not Found)
webpack配置中的publicPath必须是绝对地址，详细配置如下所示：
module.exports = {
output : {
path: configs.dist,
publicPath: 'http://127.0.0.1/static/',
filename : '[name].bundle.js',
libraryTarget : 'var'
XMLHttpRequest cannot load http://127.0.0.1/static/df222441abc9ddb6a616.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
不可思议，在本地访问竟然会出现AJAX跨域问题，仔细检查后发现，浏览器把localhost与127.0.0.1当成了两个不同的域，解决的方法很多，只说最简单的一种，访问应用时，尽量采用与webpack配置中的publicPath完全一致的路径，如在本文中，最好的访问方法是输入访问本地应用。
错误4：OccurenceOrderPlugin构造器错误
new webpack.optimize.OccurenceOrderPlugin(),
TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor
at Object.&anonymous& (E:\Workspace\vue-hot\dev-server.js:23:6)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3
此问题一般出现在webpack 2中，解决办法很简单，将OccurenceOrderPlugin改为OccurrenceOrderPlugin即可。
webpack编译程序有两种热加载方式，webpack-dev-server与webpack-hot-middleware方式，从webpack 2的性能来看，webpack-dev-server完全能够满足开发的需要，但最大的问题在于，webpack-dev-server不能向外发布服务，只能在本地访问。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：197409次
积分：4548
积分：4548
排名：第6677名
原创：281篇
评论：38条
(10)(28)(40)(45)(16)(6)(2)(12)(19)(19)(3)(21)(37)(23)(1)问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
配置按照官网文档进行配置的，运行后一直保错，对于 react-hot-loader/patch 我在 webpack.config.js 中已经写在了 entry 数组的最前部，依然没有效果。
main.js:1 React Hot Loader: It appears that "react-hot-loader/patch" did not run immediately before the app started. Make sure that it runs before any other code. For example, if you use Webpack, you can add "react-hot-loader/patch" as the very first item to the "entry" array in its config. Alternatively, you can add require("react-hot-loader/patch") as the very first line in the application code, before any other imports.
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我也遇到这个问题，请问你解决了吗
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：16:38 提问
webpack。因为HtmlWebpackPlugin中的模板html使用了thymeleaf报错了
我的HtmlWebpackPlugin配置是
```new HtmlWebpackPlugin({
template: '../template/sidebars.html',
filename: '../../../templates/home/sidebars.html',
imagePath:'',
xhtml:true,
inject: false
sidebars.html的其中一段语法是这样的
```&div class="visiter kl-container" th:fragment="visitors (maxShow)" th:if="${not #lists.isEmpty(visitors)}"&
&div class="side-title"&
&span class="fb"&谁看过我&/span&
&div class="list"&
&div class="user" th:each="visit, vStat : ${visitors}" th:unless="${vStat.index & maxShow}"&
&a href="#" target="_blank" kl:profile="${visit.visitor}" kl:homepage="@{/}"&
&img class="sider-avatar" src="/images/avatar.png" th:if="${not #strings.isEmpty(visit.visitor.link)}"
kl:thumbnail="sqr72" th:src="@{${visit.visitor.link}}" th:alt="${visit.visitor.name + 'Logo'}"/&
&img class="sider-avatar" src="/images/avatar.png" th:if="${#strings.isEmpty(visit.visitor.link)}"
th:alt="${visit.visitor.name + 'Logo'}"/&
&div class="name" &
&span class="name-text con-overflow" th:text="${visit.visitor.name}"&&/span&
&svg class="kl global-icon-verified" th:if="${visit.visitor.sign & 1}" aria-hidden="true"&
&use xlink:href="#kl-certification"&&/use&
&div class="info con-overflow" th:text="${visit.visitor.title}"&CEO&/div&
报错是这样的
```Html Webpack Plugin:
Error: Child compilation failed:
Module build failed: SyntaxError: Unexpected token ILLEGAL
- Function
- lodash.js:14843
[js]/[lodash]/lodash.js:14843:16
- lodash.js:494 apply
[js]/[lodash]/lodash.js:494:27
- lodash.js:15227
[js]/[lodash]/lodash.js:15227:16
- lodash.js:496 apply
[js]/[lodash]/lodash.js:496:27
- lodash.js:6600
[js]/[lodash]/lodash.js:6600:16
- lodash.js:14842 Function.template
[js]/[lodash]/lodash.js:14842:20
- SyntaxError: Unexpected token ILLEGAL
- compiler.js:76
[js]/[html-webpack-plugin]/lib/compiler.js:76:16
- Compiler.js:304
[js]/[webpack]/lib/Compiler.js:304:11
- Compiler.js:520
[js]/[webpack]/lib/Compiler.js:520:14
- Tapable.js:202 next
[js]/[tapable]/lib/Tapable.js:202:11
- CachePlugin.js:62 Compiler.
[js]/[webpack]/lib/CachePlugin.js:62:5
- Tapable.js:206 Compiler.applyPluginsAsyncSeries
[js]/[tapable]/lib/Tapable.js:206:13
- Compiler.js:517
[js]/[webpack]/lib/Compiler.js:517:11
- Tapable.js:195 Compilation.applyPluginsAsyncSeries
[js]/[tapable]/lib/Tapable.js:195:46
- Compilation.js:671
[js]/[webpack]/lib/Compilation.js:671:19
- Tapable.js:195 Compilation.applyPluginsAsyncSeries
[js]/[tapable]/lib/Tapable.js:195:46
- Compilation.js:662
[js]/[webpack]/lib/Compilation.js:662:11
- Tapable.js:202 next
[js]/[tapable]/lib/Tapable.js:202:11
- index.js:244 Compilation.
[js]/[uglifyjs-webpack-plugin]/dist/index.js:244:6
- Tapable.js:206 Compilation.applyPluginsAsyncSeries
[js]/[tapable]/lib/Tapable.js:206:13
- Compilation.js:657
[js]/[webpack]/lib/Compilation.js:657:10
- Tapable.js:195 Compilation.applyPluginsAsyncSeries
[js]/[tapable]/lib/Tapable.js:195:46
- Compilation.js:653 sealPart2
[js]/[webpack]/lib/Compilation.js:653:9
- Tapable.js:195 Compilation.applyPluginsAsyncSeries
[js]/[tapable]/lib/Tapable.js:195:46
- Compilation.js:596 Compilation.seal
[js]/[webpack]/lib/Compilation.js:596:8
- Compiler.js:514
[js]/[webpack]/lib/Compiler.js:514:17
- Tapable.js:289
[js]/[tapable]/lib/Tapable.js:289:11
- Compilation.js:498
[js]/[webpack]/lib/Compilation.js:498:11
- Compilation.js:468
[js]/[webpack]/lib/Compilation.js:468:14
请问有什么办法解决吗
按赞数排序
其他相关推荐
其他相似问题webpack配置环境变量解决“不是内部命令”问题
webpack配置环境变量解决&不是内部命令&问题，当我安装了webpack，在命令行输入webpack -v结果发生报错，webpack不是内部命令，当时在往上找到了一个解决办法。也真正解决了问题;方法如下：
2、如果你忘记了node的安装目录，没关系，在命令行输入
如果你设置过node的环境变量，这里一定会有显示;这样我们看的出我的node安装在了C:\Program Files\nodejs\目录下了;
3、配置一下npm的路径，这里主要是配置npm的全局存放路径和缓存路径;
npm config set presfix &C:\Program Files\nodejs\node_global&
npm config set cache &C:\Program Files\nodejs\node_cache&
4、这样设置好了npm的全局存放目录后，用npm在全局安装
npm install webpack -g
5、安装好之后，接下来修改环境变量，右键我的电脑&&属性&&高级设置&&高级&&环境变量;
新建一个NODE_PATH的键，输入上面定的全局存放路径;
同时在path中的路径也要添加与NODE_PATH一致的路径，注意：path路径如果有多条，那么注意一下你以前是不是设置过全局存放路径，如果设置过，请修改，或者放在之前设置的全局存放目录前;
6、全部工作到这里已经完成，接下里我们来验证一下是否解决掉了问题，若果没有，请按照上述步骤逐一排查，查看是不是哪一步出了错误;问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
Hash: 6b1d48e103d0b4a59a7bVersion: webpack 1.13.2Time: 197mschunk
{0} bundle.js (main) 3 kB [rendered]
[0] multi main 40 bytes {0} [built] [1 error]
[1] ./~/webpack/hot/only-dev-server.js 2.17 kB {0} [built]
[2] ./~/webpack/hot/log-apply-result.js 788 bytes {0} [built]
ERROR in multi mainModule not found: Error: Cannot resolve module 'webpack-dev-server/client' in /Users/wangchongya/Documents/redux @ multi mainwebpack: bundle is now VALID.
var webpack=require('webpack');var path=require('path');var BUILD_PATH = path.resolve(__dirname, './build');module.exports={
devtool: 'inline-source-map',
'webpack-dev-server/client?http://127.0.0.1:8080/', // WebpackDevServer host and port
'webpack/hot/only-dev-server',
path:BUILD_PATH,
filename: 'bundle.js'
resolve: {
modulesDirection: ['node_modules','src'],
extensions: ['','.js']
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot','babel?presets[]=es2015,presets[]=react']
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
Module not found: Error: Cannot resolve module 'webpack-dev-server/client'
是不是没装webpack-dev-server？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
ERROR in ./entry.jsModule build failed: Error: React Hot Loader: The Webpack loader is now exported separately. If you use Babel, we recommend that you remove "react-hot-loader" from the "loaders" section of your Webpack configuration altogether, and instead add "react-hot-loader/babel" to the "plugins" section of your .babelrc file. If you prefer not to use Babel, replace "react-hot-loader" or "react-hot" with "react-hot-loader/webpack" in the "loaders" section of your Webpack configuration.
我的是这个错误。。为什么。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
entry里面要3个值把，入口文件你光写了两个dev相关的把具体的入口文件也写上啊。。。
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：}