Я использовал веб-пакет, но почему запрос не уменьшается? - PullRequest
Новая
       6

Я использовал веб-пакет, но почему запрос не уменьшается?

0 голосов
/ 25 марта 2020

Я использовал веб-пакет, но почему бы мне не получать меньше запросов?

Выполнена команда сценария "npm run dev".

Я был Access localhost:9000

Но почему http-запросы не уменьшаются?

Насколько я знаю, веб-пакет связывает файлы. Я проверил вкладку Сеть, но пакет не работает.

введите описание изображения здесь

Пожалуйста, проверьте мои настройки ...

package.json файл 

{
  "name": "dev-server-test1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^4.0.1",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

webpack.config.js

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'none',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    port: 9000,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
  ],
};

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>DevServer</title>
  </head>
  <body>    
    <div class="container">
      TEST..
    </div>
  </body>
</html>

index.js

var div = document.querySelector('.container');
div.innerText = 'load Webpack!!';

1 Ответ

0 голосов
/ 25 марта 2020 
module.exports = {
  mode: 'none',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  }

ваш webpack.config. js принимает индекс. js в качестве записи и выводит пакетный файл. js. Теперь, если ваш индекс. js выглядит следующим образом: 

console.log("Script loaded");

, это будет указано в файле пакета. js. Нет привязки или связывания модулей, даже если вы используете webpack.

Однако, если ваш индекс. js был: 

import './script1.js'
import './script2.js'

, при запуске webpack эти сценарии будут объединены в один сценарий. bundle. js, который фактически сокращает запросы к серверу, так как у вас будет 1 скрипт вместо загрузки их по отдельности.

...