移动到一个单独的包中

移动到一个单独的包中

关注
发信
关注(28)粉丝(399)

CLI 移动到一个单独的包中:webpack-cli

本文介绍了CLI 移动到一个单独的包中:webpack-cli的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 React.js 的新手，我正在尝试从 tutorialspoint 上的教程中学习 但我遇到了错误.这是我执行 npm start 命令时控制台上的错误:

C:UsersHPDesktop
eactApp1>启动>[email protected] 启动 C:UsersHPDesktop
eactApp1.>webpack-dev-server --hotCLI 移动到一个单独的包中:webpack-cli.请安装 .webpack-cli.除了 webpack 本身使用 CLI.->使用 npm 时: npm install webpack-cli -D->使用 yarn 时: yarn add webpack-cli -D模块.js:540抛出错误；错误:找不到模块 .webpack-cli/bin/config-yargs.在 Function.Module._resolveFilenam (module.js:538:15)在功能模块.负载(module.j5:668:25)在 Module.require (module.js,587.17)在要求(内部/module.js:11:18)在对象•(C:UsersHPDesktop
eactApp1
ode_moduleswebpack-dev-serverinwebpack-dev-server.js:65:1)在模块.编译 (module.js:663:30)在 Object.Module.扩展名..js (module.js:656:10)在 Module.load (module.js:556:32)在 tryModuleLoad (module.js:699:12)在功能模块.加载 (modul.js:691:3)npm 错误！代码生命周期npm 错误！错误号 1npm 错误！[email protected] 开始:`webpack-dev-server --hot`npm 错误！退出状态 1npm 错误！npm 错误！[email protected] 启动脚本失败.npm 错误！这可能不是 npm 的问题.上面可能有额外的日志输出.npm 错误！可以在以下位置找到此运行的完整日志:npm 错误！C:UsersHPAppDataRoaming
pm-cache\_logs2018-03-06T05_29_08_833Z-debug.log

package.json

 {"name": "reactapp1",版本":1.0.0"，描述": ""，"main": "index.js",脚本":{开始":webpack-dev-server --hot"},作者": ""，"许可证": "ISC",依赖关系":{"babel-core": "^6.26.0","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1",反应":^ 16.2.0"，"react-dom": "^16.2.0","webpack": "^4.0.1","webpack-dev-server": "^3.1.0"},开发依赖":{"babel-loader": "^7.1.3"}}

webpack.config.js

var config = {条目:'./main.js'，输出: {小路:'./'，文件名:'index.js',},开发服务器:{内联:真实，端口:8090},模块: {装载机: [{测试:/.jsx?$/,排除:/node_modules/，装载机:'巴别塔'，询问: {预设:['es2015', 'react']}}]}}module.exports = config;

ma​​in.js

从'react'导入React；从 'react-dom' 导入 ReactDOM；从'./App.jsx'导入应用程序；ReactDOM.render(, document.getElementById('app'));

App.jsx

从'react'导入React；类 App 扩展了 React.Component {使成为() {返回 (<div>你好世界！！！

);}}导出默认应用程序；

index.html

<html lang = "en"><头><元字符集=UTF-8"><title>React 应用</title><身体><div id = "app"></div><script src = "index.js"></script>
解决方案

我经历了同样的例子并面临同样的问题.所以按照上面的答案，我首先运行了这个命令 -

npm install -g webpack-cli --save-dev

什么也没发生，仍然面临同样的问题.

然后我运行了这个命令 -

npm install webpack-cli --save-dev

问题已解决，但我遇到了另一个错误.

事实证明，在新的 Webpack 版本中，他们也更改了模块属性.所以你还需要在 webpack.config.js 文件中进行更改.

模块:{规则: [{测试:/.jsx?$/,排除:/node_modules/，loader: 'babel-loader',询问: {预设:['es2015', 'react']}}]}

所以基本上 loaders 被 module 对象内的 rules 取代.

我进行了这项更改并且对我有用.

希望它可以帮助其他正在学习本教程的人.

为了解决 Invalid configuration object 问题，我参考了这个答案.https://stackoverflow.com/a/42482079/5892553

I'm new to React.js and I'm trying to learn from the tutorials on tutorialspoint but I faced error. Here is the error on console when I execute npm start command:

C:UsersHPDesktop
eactApp1> npm start
> [email protected] start C:UsersHPDesktop
eactApp1.
> webpack-dev-server --hot

The CLI moved into a separate package: webpack-cli.
Please install .webpack-cli. in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
module.js:540
    throw err;

Error: Cannot find module .webpack-cli/bin/config-yargs.
    at Function.Module._resolveFilenam (module.js:538:15)
    at Function.Module. load (module.j5:668:25)
    at Module.require (module.js,587.17)
    at require (internal/module.js:11:18)
    at Object•<anonymous> (C:UsersHPDesktop
eactApp1
ode_moduleswebpack-dev-serverinwebpack-dev-server.js:65:1)

    at Module. compile (module.js:663:30)
    at Object.Module. extensions. .js (module.js:656:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:699:12)
    at Function.Module. load (modul.js:691:3)
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! [email protected] start: `webpack-dev-server --hot`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the [email protected] start 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:UsersHPAppDataRoaming
pm-cache\_logs2018-03-06T05_29_08_833Z-debug.log

package.json

     {
      "name": "reactapp1",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server --hot"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-core": "^6.26.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "webpack": "^4.0.1",
        "webpack-dev-server": "^3.1.0"
      },
      "devDependencies": {
        "babel-loader": "^7.1.3"
      }
    }

webpack.config.js

var config = {
    entry: './main.js',
    output: {
        path:'./',
        filename: 'index.js',
    },
    devServer: {
        inline: true,
        port: 8090
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}
module.exports = config;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));

App.jsx

import React from 'react';
class App extends React.Component {
    render() {
        return (
            <div>
                Hello World!!!
            </div>
        );
    }
}
export default App;

index.html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
解决方案

I went through the same example and faced the same issue. So following the above answers I first ran this command -

npm install -g webpack-cli --save-dev

Nothing happened and was still facing the same issue.

Then I ran this command -

npm install webpack-cli --save-dev

The issue was solved but I was getting another error.

Turns out in the new Webpack version they have changed the module attributes also. So you need to make change in the webpack.config.js file also.

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

So basically loaders is replaced by rules inside the module object.

I made this change and it worked for me.

Hope it helps other people who are following this tutorial.

To resolve the Invalid configuration object issue, I referred to this answer.https://stackoverflow.com/a/42482079/5892553

这篇关于CLI 移动到一个单独的包中:webpack-cli的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-16 00:20
Powered by LMLPHP ©2024 移动到一个单独的包中 0.037589