webpack-dev-server działa dwukrotnie

Question

Próbowałem rozwiązać ten problem na kilka różnych sposobów, więc muszę zacząć od początku.

Mam plik konfiguracyjny o nazwie webpack.dev.js, na zdjęciu tutaj:

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"}]) 
    ] 
}; 

Więc mogę skonfigurować skrypt startowy w package.json do uruchamiania serwera dev

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

Teraz jest gdzie zaczynają się problemy. Kiedy wpadłem skryptu, mam następujący błąd

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? } 

Jak widać, ten błąd jest bardzo mylące, ponieważ nie ma żadnego error nieruchomość w pliku konfiguracyjnym

Po wypróbowaniu różnych sposobów napraw to, próbowałem po prostu usunąć właściwość devServer i uruchomić serwer dev z ustawieniami domyślnymi.

Ale teraz jest, gdy robi się dziwnie. Wyjście wygląda, jeśli serwer WWW rozpoczęto dwukrotnie:

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

A potem rejestruje kilka ostrzeżeń o nie będąc multiple modules with names that only differ in casing

Następnie po pewnym googling ja dowiedziałem się o kimś, że miał również ten unknown property 'error' problemu , a powodem, dla którego mu się to przydarzyło, było to, że miał on w tle http-server.

W tej chwili, moja teoria mówi, że z jakiegoś powodu serwer webpack-dev działa równolegle i tworzy warunek wyścigu lub błąd, który wyzwala ten problem z unknown property 'error'.

Znalazłem tylko dwie osoby z podobnymi problemami, a ich poprawiono, dodając po prostu inject: false do obiektu konfiguracyjnego HtmlWebpackPlugin. Wykonanie tego nie spowodowało zniknięcia błędu, a po uruchomieniu go bez konfiguracji devServer po prostu usunął wszystkie js i css ze strony, ponieważ nie wstrzyknął znaczników <link> i <script> do html.

W tym momencie nie mam pojęcia, jak rozwiązać ten problem, i dlatego pytam, czy ktoś może mi pomóc.

Answer 1

W folderze projektu uruchom npm uninstall webpack-dev-server.

Miałem ten sam problem w przypadku nowego projektu z webpack-dev-server v2.9.1, mając jednocześnie uruchomione dwa serwery. Zdałem sobie sprawę, że mam zainstalowany pakiet webpack-dev-server dwa razy, jeden w moim folderze projektu node_modules, ponieważ był wymieniony jako zależność w moim package.json, a drugi zainstalowany globalnie, więc po prostu usunąłem lokalny.

Mam złożony problem: https://github.com/webpack/webpack-dev-server/issues/1125

Answer 2

Wydaje się być powiązana z webpack-dev-server wersja 2.8.0.

Rozwiązałem problem, obniżając go do wersji ~ 2.7.0 (2.7.1).

Answer 3

miałem też wykonać następujące czynności, aby uzyskać tej pracy oprócz odinstalowanie devserver przez KMP.

1. ręcznie usunąć folder webpack-dev-server z modułów węzłów.
2. Uruchomić npm init.

Czarna magia wprawdzie wprawdzie, ale raz to zrobiono, ożyło - spędził 2 godziny na tym tak bardzo wdzięczny za OP, wskazując, że serwer dev działał dwa razy.