错误：带有 ReactJS 和 Django 的 webpack-dev-server答案

【问题标题】：Error: webpack-dev-server with ReactJS and Django错误：带有 ReactJS 和 Django 的 webpack-dev-server
【发布时间】：2018-09-29 08:40:14
【问题描述】：

我尝试使用 Django + ReactJS 创建一个完整的堆栈环境。在这里，我使用了 Webpack bundler，当我尝试从 virtualenv 运行我的 webpack-server 时遇到了这个错误。我对应用程序开发非常陌生，这是我的第一次尝试，有人可以帮助我吗？

PS C:\Users\NikhileshSubramanian\Desktop\eduWebApp\env\frontend> npm run dev

frontend@0.1.0 dev C:\Users\NikhileshSubramanian\Desktop\eduWebApp\env\frontend webpack-dev-服务器模块.js:549 抛出错误； ^

Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\Users\NikhileshSubramanian\node_modules\html-webpack-plugin\lib\compiler.js:9:28)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@0.1.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@0.1.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional 
logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\NikhileshSubramanian\AppData\Roaming\npm- 
cache\_logs\2018-09-29T07_48_56_942Z-debug.log

我的 package.json 中的脚本

"scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test --env=jsdom",
       "eject": "react-scripts eject",
       "buildwebpack": "webpack",
       "dev": "webpack-dev-server"
   },
   "devDependencies": {
          "webpack": "^4.20.2",
          "webpack-cli": "^3.1.1",
          "webpack-dev-server": "^3.1.9"
    }

项目工作目录 https://i.stack.imgur.com/z1v0p.png

【问题讨论】：

标签： reactjs npm webpack

【解决方案1】：

我看到你使用的是windows系统。所以也许你需要为这个“webpack/lib/node/NodeTemplatePlugin”模块配置环境变量。然后就可以找到模块了。

【讨论】：

谢谢。但是，这一次“错误：找不到模块 'webpack'”即使在我的路径中添加了 'my/project/frontend/node_modules/webpack' 之后也是如此。
也许您应该指定插件“NodeTemplatePlugin”的确切路径。

【解决方案2】：

当我们通过create-react-app 创建项目时，Webpack 内置在 React 模块中。这就是 Facebook 开发的方式，以减少对环境设置的关注并着眼于构建应用程序。因此，有一种避免 Webpack 启动的简单方法来创建我们的项目。

参考： https://www.techiediaries.com/react-tutorial/

【讨论】：