Question

我使用了一个webpack，但是为什么我收到的请求没有减少？

已执行脚本命令“ npm run dev”。

我正在访问localhost:9000

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

据我所知，一个webpack绑定文件。我检查了“网络”标签，但该捆绑包不起作用。

请检查我的设置...

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，但是为什么请求数量却没有减少？

1 个答案:

我使用了Webpack，但是为​​什么请求数量却没有减少？

1 个答案:

我使用了Webpack，但是为什么请求数量却没有减少？