Question

我有一个静态网站，其中包含资产.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;

Answer 1

当entry是数组时，Webpack不会为每个元素创建单独的包。相反，它就像它将它们汇总成一个入口点。如果您需要单独的包，则必须传递一个对象，其中键是包的名称。由于glob.sync返回一个数组，你可以将它减少到像这样的对象

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

您还需要将[name]添加到output.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"
    }

您可能需要使用名称做一些更具创意的内容，以便它们是独一无二的，但您明白了。

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

1 个答案: