En introduktion til Webpack Dev Server

webpack-dev-server er Webpacks officielt understøttede CLI-baserede værktøj til at starte en statisk server til dine aktiver. Selvom du ikke behøver nogen CLI-værktøjer for at bruge Webpack, giver webpack-dev-server dig en enkelt kommando, der starter en statisk server med indbygget live-genindlæsning.

Opsætning

For at køre webpack-dev-server skal du installere webpack og webpack-cli ud over webpack-dev-server.

npm install [email protected] [email protected] [email protected]

Antag, at du har en index.js fil, der bruger Axios til at lave en HTTP-anmodning og vise resultatet i en <h1> .

const axios = require('axios');

axios.get('http://httpbin.org/get?answer=42').
  then(res => {
    console.log(res.data.args.answer); // 42
    document.getElementById('content').innerHTML = `<h1>${res.data.args.answer}</h1>`;
  });

index.html fil vil indlæse en minificeret version af index.js , index.min.js , som Webpack vil bygge. Nedenfor er index.html fil.

<html>
  <head>
    <script type="text/javascript" src="/index.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
  </body>
</html>

Til dette eksempel skal du bruge en fil mere:webpack.config.js der fortæller Webpack, hvordan dit projekt skal kompileres. Nedenstående webpack.config.js er tilstrækkeligt til at kompilere index.js til en index.min.js bundt, der indeholder Axios.

module.exports = {
  mode: 'development',
  entry: './index.js',
  optimization: {
    minimize: false
  },
  target: 'web',
  output: {
    path: __dirname, 
    filename: 'index.min.js'
  }
};

Køring af udviklerserveren

For at køre webpack-dev-server skal du køre følgende kommando.

./node_modules/.bin/webpack-dev-server

Når du har kørt webpack-dev-server, bør du se nedenstående output.

Live reload betyder, at ændringer, du foretager i din JavaScript-fil, forplanter sig til browseren, uden at du behøver at opdatere siden. For eksempel, hvis du ændrer 'svar' fra 42 til 43 i index.js , genkompilerer Webpack automatisk index.js og browseren genindlæses automatisk, uden at du behøver at gøre noget.