Question

我在为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吗？（我使用yarn，因为老实说我鄙视npm，而不希望使用它。）我还想补充一点，我可以只使用npx create-react-app project，但是我现在不愿使用样板，因为我希望能够对我的项目有更多的控制权。在此期间我一直将头撞在墙上，对您有所帮助。提前致谢。

Answer 1

似乎webpack没有正确安装在您的依赖项中。

重试此：

yarn add -D webpack

注意：使用Yarn时，您需要使用-D或--dev（而不是--save-dev）来安装开发依赖项。

无法配置Webpack

1 个答案: