Question

我已按照Tutorials Point中提到的步骤构建React。 NPM的开始也很成功。但是在CHROME上运行应用程序时，我得到了以下异常。

/******/ (function(modules) { // webpackBootstrap /******/ function hotDisposeChunk(chunkId) { /******/ delete
installedChunks [块ID]; / ****** /} / ****** / var parentHotUpdateCallback = this [＆＃34; webpackHotUpdate＆＃34;]; / ****** / 这个[＆＃34; webpackHotUpdate＆＃34;] = / ****** /功能 webpackHotUpdateCallback（chunkId，moreModules）{// eslint-disable-line no-unused-vars / ****** / hotAddUpdateChunk（chunkId， moreModules）; / ****** / if（parentHotUpdateCallback） parentHotUpdateCallback（chunkId，moreModules）; / ****** /}; / ****** / / ****** / function hotDownloadUpdateChunk（chunkId）{// eslint-disable-line no-unused-vars / ****** / var head = document.getElementsByTagName（＆＃34;头＆＃34;）[0]; / ****** / var script = 使用document.createElement（＆＃34;脚本＆＃34）; / ****** / script.type = ＆＃34;文本/ JavaScript的＆＃34 ;; / ****** / script.charset =＆＃34; utf-8＆＃34 ;; / ****** / script.src = webpack_require .p +＆＃34;＆＃34; + chunkId +＆＃34;。＆＃34; + hotCurrentHash +＆＃34; .hot-update.js＆＃34 ;; / ****** / head.appendChild（script）; / ****** /} / ****** / / ****** / function hotDownloadManifest（）{// eslint-disable-line no-unused-vars / ****** / return new 承诺（函数（解析，拒绝）{/ ****** / if（typeof XMLHttpRequest ===＆＃34; undefined＆＃34;）/ ****** / return reject（新错误（＆＃34;没有浏览器支持＆＃34;））; / ****** /试试{/ ****** / var request = new 的XMLHttpRequest（）; / ****** / var requestPath = webpack_require .p + ＆＃34;＆＃34; + hotCurrentHash +＆＃34; .hot-update.json＆＃34 ;; / ****** / request.open（＆＃34; GET＆＃34;， requestPath，true）; / ****** / request.timeout = 10000; / ****** / request.send（NULL）; / ****** /} catch（错误）{/ ****** / return 拒绝（ERR）; / ****** /} / ****** / request.onreadystatechange = function（）{/ ****** / if（request.readyState！== 4）return; / ****** / if（request.status === 0）{/ ****** / // timeout / ****** / reject（new 错误（＆＃34;显示请求＆＃34; + requestPath +＆＃34;超时。＆＃34;））; / ****** / } else if（request.status === 404）{/ ****** / //没有可用的更新 / ****** / resolve（）; / ****** /}否则if（request.status！== 200＆amp;＆amp; request.status！== 304）{/ ****** / //其他失败/ ****** / 拒绝（新错误（＆＃34;清单请求＃34; + requestPath +＆＃34;失败。＆＃34;））; / ****** /} else {/ ****** / // success / ****** / try {/ ****** / var update = JSON.parse（request.responseText）; / ****** /} catch（e）{ / ****** /拒绝（e）; / ****** / return; / ****** /} / ****** / 解决（更新）; / ****** /} / ****** /}; / ****** /}）; / ****** /} / ****** / / ****** / / ****** / / ****** / var hotApplyOnUpdate = true; / ****** / var hotCurrentHash =＆＃34; b2ee6a68403ad9971596＆＃34 ;; // eslint-disable-line no-unused-vars / ****** / var hotCurrentModuleData = {}; / ****** / var hotMainModule = true; // eslint-disable-line no-unused-vars / ****** / var hotCurrentParents = []; // eslint-disable-line no-unused-vars / ****** / var hotCurrentParentsTemp = []; // eslint-disable-line no-unused-vars / ****** / / ****** / function hotCreateRequire（moduleId）{// eslint-disable-line no-unused-vars / ****** / var me = installedModules [moduleId]; / ****** / if（！me）返回的 webpack_require ; / ****** / var fn = function（request）{/ ****** / if（me.hot.active）{/ ****** / if（installedModules [request]）{/ ****** / if（installedModules [request] .parents.indexOf（moduleId）＆lt; 0）/ ****** / installedModules [请求] .parents.push（的moduleId）; / ****** /}其他 hotCurrentParents = [moduleId]; / ****** / if（me.children.indexOf（request）＆lt; 0）/ ****** / me.children.push（请求）; / ****** /} else {/ ****** / 来自处置的console.warn（＆＃34; [HMR]意外需要（＆＃34; +请求+＆＃34;）模块＆＃34; + moduleId）; / ****** / hotCurrentParents = []; / ****** /} / ****** / hotMainModule = false; / ****** /返回的 webpack_require （请求）; / ****** /}; / ****** / var ObjectFactory = function ObjectFactory（name）{/ ****** / return {/ ****** / configurable：true，/ ****** / enumerable：true，/ ****** / get： function（）{/ ****** / return webpack_require [name]; / ****** /}， / ****** / set：function（value）{/ ****** / webpack_require [name] = 值; / ****** /} / ****** /}; / ****** /}; / ****** / for（var name in webpack_require ）{/ ****** / if（Object.prototype.hasOwnProperty.call（ webpack_require ，name））{ / ****** / Object.defineProperty（fn，name，ObjectFactory（name））; / ****** /} / ****** /} / ****** / Object.defineProperty（fn，＆＃34; e＆＃34;，{ / ****** / enumerable：true，/ ****** / value：function（chunkId）{ / ****** / if（hotStatus ===＆＃34; ready＆＃34;）/ ****** / hotSetStatus（＆＃34; prepare＆＃34;）; / ****** / hotChunksLoading ++; / ****** /返回 webpack_require .e（chunkId）.then（finishChunkLoading，function（err）{/ ****** / finishChunkLoading（）; / ****** / throw err; / *** *** /}）; / ****** / / ****** / function finishChunkLoading（）{/ ****** / hotChunksLoading--; / ****** / if（hotStatus ===＆＃34; prepare＆＃34;）{/ ****** / if（！hotWaitingFilesMap [chunkId]）{/ ****** / hotEnsureUpdateChunk（块ID）; / ****** /} / ****** / if（hotChunksLoading === 0＆amp;＆amp; hotWaitingFiles === 0）{/ ****** / hotUpdateDownloaded（）; / ****** /} / ****** /} / ****** /} / ****** /} / ****** /}）; / ****** / 返回fn; / ****** /} / ****** / / ****** /功能 hotCreateModule（moduleId）{// eslint-disable-line no-unused-vars / ****** / var hot = {/ ****** / //私人东西/ ****** / _acceptedDependencies：{}，/ ****** / _declinedDependencies：{}，/ ****** / _selfAccepted：false，/ ****** / _selfDeclined：false，/ ****** / _disposeHandlers：[]，/ ****** / _main：hotMainModule，/ ****** / / ****** / //模块API / ****** / active：true，/ ****** /

以下是我的Package.json：

{
  "name": "reactprgrams",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.0.0",
    "path": "^0.12.7",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "webpack": "^3.5.1",
    "webpack-dev-server": "^2.11.0"
  },
  "devDependencies": {
    "webpack-cli": "^2.0.10"
  }
}

下面是我的Webpack.config.js：

var config = {

entry: './src/main.jsx',
output: {
    path:'/',
    filename:'index.html'
},
devServer: {

    inline: true,
    port: 8000

},

module:{
    loaders:[{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: ['es2015', 'react']
        }
    }]
}

} module.exports = config;

我尝试过使用不同版本的webpack和webpack-dev-server。但无法解决问题。请告诉我哪里出错了。

Answer 1

尝试修复package.json，如下所示：

"scripts": {
  "start:dev": "webpack-dev-server"
}

在终端/控制台中运行以下命令：

npm run start:dev

有关如何使用＆amp;的更多信息配置webpack看看here

我是React的新手并使用它构建基本应用程序

1 个答案: