【发布时间】：2020-04-09 03:44:36
【问题描述】：
我在为 react 项目配置 webpack 时遇到了问题，这让我很沮丧一段时间。到目前为止，这是我的代码：
package.json:
{
"name": "project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "MIT",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset": "^1.1.1",
"babel-preset-es2015": "^6.24.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"webpack-dev-server": "^2.5.1"
}
}
webpack.config.js：
module.exports = {
entry: './index.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
devtool: 'eval-source-map',
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
plugins: ['transform-object-rest-spread']
}
}
]
}
};
index.js：
import React from 'react';
import ReactDom from 'react-dom';
import App from './components/app';
ReactDom.render(
<App/>,
document.getElementById('app')
);
和 index.html：
<html>
<head>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
我已经运行了以下命令来安装 webpack 和 babel 依赖项。以下是我遵循的命令：
yarn add --save-dev webpack@^3.2.0 webpack-dev-server@^2.5.1 、 yarn add --save-dev babel-cli babel-core babel-loader babel-plugin-transform-object-rest-spread babel-preset-es2015 babel-preset-react 和 yarn add --save react react-dom 。从项目的根目录运行yarn start 后，控制台输出显示：
yarn run v1.15.2
warning ../package.json: No license field
$ webpack-dev-server
internal/modules/cjs/loader.js:628
throw err;
^
Error: Cannot find module 'webpack'
Require stack:
- /Users/mg185312/Documents/MyProjects/project/node_modules/webpack-dev-server/lib/Server.js
- /Users/mg185312/Documents/MyProjects/project/node_modules/webpack-dev-server/bin/webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
at Function.Module._load (internal/modules/cjs/loader.js:527:27)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object.<anonymous> (/Users/mg185312/Documents/MyProjects/project/node_modules/webpack-dev-server/lib/Server.js:22:17)
at Module._compile (internal/modules/cjs/loader.js:777:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/mg185312/Documents/MyProjects/project/node_modules/webpack-dev-server/lib/Server.js',
'/Users/mg185312/Documents/MyProjects/project/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
我是否使用了错误版本的 webpack 或任何 babel 依赖项？我也想知道为什么我的依赖项中没有列出"webpack": "^3.2.0" 或babel-cli，或者为什么它们在"dependencies" 而不是"devDependencies"，即使我在我的所有文件中都使用了标志--save-dev命令。有什么不对？当我用 yarn init 做第一件事时，我是不是搞砸了？我应该使用 npm 而不是纱线吗？ （我使用 yarn 是因为老实说我鄙视 npm 并且不想打扰使用它）。我还想补充一点，我可以只使用 npx create-react-app project ，但此时我宁愿不使用样板，因为我希望能够对我的项目有更多的控制权。任何帮助将不胜感激，因为我已经将头撞在墙上一段时间了。提前致谢。
【问题讨论】：
-
您在尝试安装 webpack 时看到了什么输出？你在正确的目录中运行它了吗？
-
是的，我从项目的根目录运行
yarn add webpack。我实际上能够通过使用--dev标志而不是--save-dev标志来解决我的webpack 配置问题（我对其中一些不熟悉，我了解到--dev用于纱线，而--save-dev用于npm）。此外，所有 babel 模块都以不同的格式编写。例如，babel-core现在是@babel/core。实际上，我有一个正在考虑共享的工作配置，但我不知道这会对任何人有多大帮助，特别是因为版本兼容性变化如此频繁。 -
这取决于你使用的 babel 版本。当您使用无法识别的标志时，纱线没有说什么吗？默认行为是将其添加为非开发依赖项，这也会将其添加到您的包文件中。
标签： reactjs npm webpack yarnpkg