我用了webpack，为什么请求没有减少？

Question

我使用了 webpack，但为什么我的请求没有减少？

执行脚本命令"npm run dev"。

我是Access localhost:9000

但为什么 http 请求没有减少？

据我所知，webpack 绑定文件。我检查了“网络”选项卡，但捆绑包不起作用。

enter image description here

请检查我的设置...

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!!';

Answer 1

module.exports = {
  mode: 'none',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  }

您的 webpack.config.js 将 index.js 作为条目并输出 bundle.js 文件。现在，如果您的 index.js 看起来像这样：

console.log("Script loaded");

这将输出到 bundle.js 文件中。即使使用 webpack 也没有绑定或模块捆绑。

但是，如果您的 index.js 是：

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

当您运行 webpack 时，它会将这些脚本捆绑到一个脚本中 bundle.js 这实际上减少了服务器请求，因为您将拥有 1 个脚本而不是单独加载它们。

我用了webpack，为什么请求没有减少？

I used a webpack, but why isn't the request reduce?

frontend

web-frontend

webpack