Wie ordne ich Website-Assets mit Webpack richtig ein?

Question

Ich habe eine statische Website, die Assets .js, .css, .svg und .pngs Dateien hat.

Ich versuche, Webpack zu bündeln dann alle zusammen, aber bisher kein Erfolg.

Hier ist was ich bisher habe. Irgendwelche Gedanken? Wenn Sie eine Online-Ressource kennen, schreiben Sie bitte den Link.

Mein Ziel ist es, die Mindestanzahl von HTTP-Anfragen zu haben und alles minimiert zu haben.

'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

Wenn entry ist ein Array Webpack kein separates Bündel für jedes Element erstellen. Stattdessen ist es so, als würde sie alle zu einem einzigen Einstiegspunkt zusammenführen. Wenn Sie separate Bündel benötigen, müssen Sie ein Objekt übergeben, bei dem die Schlüssel die Namen der Bündel sind. Da glob.sync ein Array zurückgibt Sie wie so dass auf ein Objekt reduzieren könnte

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

werden Sie auch etwas kreativere kann [name] zu Ihrem 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" 
    } 

Sie tun müssen, hinzufügen wollen mit die Namen, damit sie einzigartig sind, aber Sie bekommen die Idee.