webpack-dev-server를 두 번 실행합니다.

Question

여러 가지 방법으로이 문제를 해결하려고 했으므로 처음부터 시작해야합니다.

내가 webpack.dev.js라는 이름의 설정 파일, 여기에 사진이 있습니다

const path = require("path"); 

const HtmlWebpackPlugin = require("html-webpack-plugin"); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const CopyWebpackPlugin = require("copy-webpack-plugin"); 

module.exports = { 
    entry: "./src/script.js", 
    output: { 
    filename: "bundle.js", 
    path: path.resolve(__dirname, "dist") 
    }, 

    devtool: "inline-source-map", 
    devServer: { 
    contentBase: path.join(__dirname, "dist") 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     use: { 
      loader: "babel-loader", 
      options: { 
      presets: ["env"] 
      } 
     } 
     }, 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: ["css-loader", "postcss-loader", "sass-loader"] 
     }) 
     } 
    ] 
    }, 

    plugins: [ 
    new HtmlWebpackPlugin({template: path.join("src", "index.html")}), 
    new ExtractTextPlugin("style.css"), 
    new CopyWebpackPlugin([{from: "src/images", to: "images"}]) 
    ] 
}; 

을 그래서를, 나는 지금입니다 dev에 서버

"start": "webpack-dev-server --config webpack.dev.js"

을 시작하기위한 package.json에서 시작 스크립트를 설정 문제가 시작됩니다. 나는이 스크립트를 실행하면 다음 오류

Invalid configuration object. webpack-dev-server has been initialized using a configuration object that does not match the API schema. 
- configuration has an unknown property 'error'. These properties are valid: 
    object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? } 

을 가지고 당신이 볼 수 있듯이 설정 파일

에 어떤 error 속성에 다른 방법을 시도 한 후이 없기 때문에이 오류가 매우 혼란 이 문제를 해결하기 위해 나는 단지 devServer 속성을 제거하고 기본 설정으로 dev 서버를 시작하려고했습니다.

하지만 지금은 이상하게 변합니다. 거기

multiple modules with names that only differ in casing을 것에 대해 몇 가지 경고를 기록 그 후

Project is running at http://localhost:8080/ 
webpack output is served from/
Project is running at http://localhost:8081/ 
webpack output is served from/

그리고

그런 다음 몇 가지 인터넷 검색 후 나는이 unknown property 'error' 문제가 있었다 다른 사람에 대해 알게 : 웹 서버가 두 번 시작된 경우처럼 출력이 보인다 그에게 일어난 이유는 그가 배경에 http-server을 가지고 있었다는 것이 었습니다.

그래서 지금 내 이론은 어떤 이유로 webpack-dev-server가 두 번 병렬로 실행되고 있으며 이것이 경쟁 조건 또는 오류를 유발하여이 unknown property 'error' 문제를 유발한다는 것입니다.

비슷한 문제가있는 다른 두 명의 사람 만 찾았습니다. 구성 객체 HtmlWebpackPlugin에 inject: false을 추가하면 해결되었습니다. 이렇게하면 오류가 사라지는 것은 아니며 devServer 구성을 사용하지 않고 실행하면 페이지에 모든 js 및 css가 삭제됩니다. <link> 및 <script> 태그가 html에 삽입되지 않기 때문입니다.

이 시점에서 나는이 문제를 어떻게 해결할 수 있을지 전혀 모른다. 그래서 나는 누군가가 나를 도울 수 있는지 묻는다.

Answer 1

프로젝트 폴더에서 npm uninstall webpack-dev-server을 실행하십시오.

webpack-dev-server v2.9.1의 새 프로젝트에서 동일한 문제가 발생하여 한 번에 두 대의 서버가 실행됩니다. 나는 내가 webpack-dev-server 패키지를 두 번 설치했음을 깨달았다. 내 프로젝트 폴더 node_modules에 하나는 내 package.json에 종속성으로 나열되어 있었고, 다른 하나는 전역으로 설치 되었기 때문에 로컬 하나만 제거했다.

가 나는 문제를 제출 한 : https://github.com/webpack/webpack-dev-server/issues/1125

Answer 2

webpack-dev-server 버전 2.8.0과 관련이있는 것으로 보입니다.

버전 2.7.0 (2.7.1)로 다운 그레이드하여 문제를 해결했습니다.

Answer 3

나는 또한 NPM을 통해 devserver 제거뿐만 아니라이 작업을 얻으려면 다음을 수행했다.

1. 수동으로 노드 모듈에서 webpack-dev-server 폴더를 삭제하십시오.
2. npm init을 실행하십시오.

블랙 마술은 인정되었지만 한 번 완료되면이 작업에 2 시간이 걸렸으므로 dev 서버가 두 번 실행되고 있음을 나타내는 OP에 매우 감사하게 생각합니다.