如何使用webpack正确绑定网站资产

我有一个静态网站，其中包含assets.js、.css、.svg和.pngs文件

我试图使用webpack将所有内容打包在一起，但迄今为止没有成功

这是我到目前为止所拥有的。有什么想法吗？如果您知道在线资源，请发布链接

我的目标是将HTTP请求的数量减到最少，并将所有内容缩小

    'use strict';
    const webpack = require('webpack'),
          path =  require('path'),
          glob = require('glob');
    let config = {
      entry: {
        'myPages': glob.sync('./js/**/*.js'),
        // 'vendor':[
        //   'jquery'
        // ],
      },
      module: {
        loaders: [
           // CSS: scss, css
           {
             test: /\.s?css$/,
             loaders: ['style', 'css', 'sass', 'postcss-loader']
           },
           // SVGs: svg, svg?something
           {
             test: /\.svg(\?.*$|$)/,
             loader: 'file-loader?name=/img/[name].[ext]'
           },
           // Images: png, gif, jpg, jpeg
           {
             test: /\.(png|gif|jpe?g)$/,
             loader: 'file?name=/img/[name].[ext]'
           },
           // HTML: htm, html
           {
             test: /\.html?$/,
             loader: "file?name=[name].[ext]"
           },
           // Font files: eot, ttf, woff, woff2
           {
             test: /\.(eot|ttf|woff2?)(\?.*$|$)/,
             loader: 'file?name=/fonts/[name].[ext]'
           }
        ]
      },
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle--[name].js'
      },
    };
    module.exports = config;

---

当

entry

为数组时，Web包不会为每个元素创建单独的包。相反，这就像是把它们集中到一个入口点。如果需要单独的包，则必须传递一个对象，其中键是包的名称。由于glob.sync返回一个数组，您可以将其简化为如下所示的对象

const entries = glob.sync('./js/**/*.js')
    .reduce(function(entries, filepath) {
        return entries[path.parse(filepath).name] = filepath;
    }, {});

您还需要将

[name]

添加到

输出中。filename

output: {
        // Make sure to use [name] or [id] in output.filename
        //  when using multiple entry points
        filename: "[name].bundle.js",
        chunkFilename: "[id].bundle.js"
    }

---

您可能需要对名称进行一些更具创造性的处理，以使其具有唯一性，但您知道了。

您正在使用文件加载器加载图像和字体。这将始终将这些资产保留为离散文件，并为您提供这些资产的解析路径。如果你真的希望所有的捆绑，你应该考虑使用URL加载器，它将把所有的图像和文件转换成Base64字符串，或者RAW加载器，它将只返回文件的纯文本。如果你有很多的输入文件，你可能想使用PuxSunkPuxin来分割所有条目共享的依赖项。这样，从一个页面转到另一个页面的用户就不必重新下载您的所有供应商代码。