webpack 配置端口 反向代理

我想通过配置webpack.config.js 来修改本地端口号并配置反向代理
但是端口号和代理都没起作用
其他设置倒是正常,可以使用
请问是怎么回事

devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        colors: true,//终端中输出结果为彩色
        historyApiFallback: true,//不跳转
        inline: true,//实时刷新
        port: '8080',

           //配置服务器
        proxy:{
           '/v4/api/*': {
                  target: 'http://m.maizuo.com',
                  host: 'm.maizuo.com',
                  changeOrigin:true
              }
        }
    },

pack,json配置

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

webpack 报错

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@3.10.10
3 info using node@v6.11.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle react-app@0.1.0~prestart: react-app@0.1.0
6 silly lifecycle react-app@0.1.0~prestart: no script for prestart, continuing
7 info lifecycle react-app@0.1.0~start: react-app@0.1.0
8 verbose lifecycle react-app@0.1.0~start: unsafe-perm in lifecycle true
9 verbose lifecycle react-app@0.1.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\work\react-app\react-app\node_modules\.bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\TortoiseGit\bin;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;C:\Users\lszp21\AppData\Local\Microsoft\WindowsApps;D:\应用\Microsoft VS Code\bin;C:\Users\lszp21\AppData\Roaming\npm
10 verbose lifecycle react-app@0.1.0~start: CWD: D:\work\react-app\react-app
11 silly lifecycle react-app@0.1.0~start: Args: [ '/d /s /c', 'webpack-dev-server --config webpack.config.js' ]
12 silly lifecycle react-app@0.1.0~start: Returned: code: 1  signal: null
13 info lifecycle react-app@0.1.0~start: Failed to exec start script
14 verbose stack Error: react-app@0.1.0 start: `webpack-dev-server --config webpack.config.js`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:891:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid react-app@0.1.0
16 verbose cwd D:\work\react-app\react-app
17 error Windows_NT 10.0.14393
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v6.11.0
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error react-app@0.1.0 start: `webpack-dev-server --config webpack.config.js`
22 error Exit status 1
23 error Failed at the react-app@0.1.0 start script 'webpack-dev-server --config webpack.config.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the react-app package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     webpack-dev-server --config webpack.config.js
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs react-app
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls react-app
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
阅读 5k
1 个回答

你要使用 webpack-dev-server 这个包啊,
然后配置package.json

 "start": "webpack-dev-server --config webpack.config.js",
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题