Verwenden von Webpack für einfache Website

Question

Ich versuche Webpack zum ersten Mal zu arbeiten und ich mache es auf einer einfachen Website, aber egal was ich versuche, es funktioniert nie richtig. Ich bin seit Wochen dran und habe jeden Thread vergeblich ausprobiert. Ich brauche nur jemanden, der kein Problem mit Webpack hat, um meinen Code anzuschauen und einen Kommentar zu geben, wie er richtig funktioniert.

Ich habe alle meine Quellcode im src-Verzeichnis. Bibliotheken und Entwicklerabhängigkeiten befinden sich im Verzeichnis node_modules. Und ich möchte Webpack laufen lassen und alles ins dist Verzeichnis ausgeben lassen. Wenn ich einen Server verwende, der nur die Dateien im Verzeichnis src verwendet, funktioniert es gut, aber sobald ich das webpack starte und versuche, die Dateien im Verzeichnis dist zu verwenden, fällt alles auseinander.

Hier webpack.config.js:

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
context: __dirname + "\\src", 
debug: true, 
entry: "./index.webpack.js", 
output: { 
    path: __dirname + "\\dist", 
    filename: "index.min.js" 
}, 
module: { 
    loaders: [ 
     { 
      test:/\.js$/, 
      exclude:/(node_modules)/, 
      loader:'babel-loader', 
      query: { 
       presets:['es2015'] 
      } 
     }, 
     { 
      test:/\.css$/, 
      exclude:/(node_modules)/, 
      loader:'style-loader!css-loader' 
     }, 
     { 
      test:/\.less$/, 
      exclude:/(node_modules)/, 
      loader:'style-loader!css-loader!less-loader' 
     }, 
     { 
      test:/\.(png|woff|woff2|eot|ttf|svg)$/, 
      exclude:/(node_modules)/, 
      loader: 'url-loader?limit=100000' 
     }, 
     { 
      test:/\.(jpe?g|png|gif|svg)$/i, 
      exclude:/(node_modules)/, 
      loader: 'url?limit=10000!img?progressive=true' 
     }, 
     { 
      test:/\.html$/, 
      exclude:/(node_modules)/, 
      loader: 'html-loader' 
     } 
    ] 
}, 
plugins: [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
] 

};

Und Punkt mein Eintrag ist index.webpack.js:

require('file?name=[name].[ext]!./index.html'); 
require('jQuery'); 
require('bootstrap'); 
require('file?name=[name].[ext]!./css/footer.css'); 
require('file?name=[name].[ext]!./css/header.css'); 
require('file?name=[name].[ext]!./css/styles.css'); 
require('file?name=[name].[ext]!./fonts/HelveticaRounded-Black.eot'); 
require('file?name=[name].[ext]!./fonts/HelveticaRounded-Black.svg'); 
require('file?name=[name].[ext]!./fonts/HelveticaRounded-Black.ttf'); 
require('file?name=[name].[ext]!./fonts/HelveticaRounded-Black.woff'); 
require('file?name=[name].[ext]!./img/butterfly.gif'); 
require('file?name=[name].[ext]!./img/dr photo.jpg'); 
require('file?name=[name].[ext]!./img/firefly.gif'); 
require('file?name=[name].[ext]!./img/footerspikes.gif'); 
require('file?name=[name].[ext]!./img/mainheaderimage.jpg'); 
require('file?name=[name].[ext]!./img/mushrooms.gif'); 
require('file?name=[name].[ext]!./img/teethkids.gif'); 
require('file?name=[name].[ext]!./img/titlebanner.gif'); 
require('file?name=[name].[ext]!./refs/footer.html'); 
require('file?name=[name].[ext]!./refs/header.html'); 
require('file?name=[name].[ext]!./refs/leftmargin.html'); 
require('file?name=[name].[ext]!./refs/rightmargin.html'); 

Was denken Sie?

--edited nach answer--

meine aktualisiert webpack.config.js ersten Versuch:

var debug = process.env.NODE_ENV !== "production"; 

var webpack = require('webpack'); 
var path = require('path'); 
var htmlWebpackPlugin = require('html-webpack-plugin'); 
var commonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'); 
var cleanWebpackPlugin = require('clean-webpack-plugin'); 

module.exports = { 
    context: path.join(__dirname, 'src'), 
    debug: true, 
    entry: { 
     entry: path.join(__dirname, 'src', 'index.webpack.js'), 
     vendor: ['jquery', 'bootstrapjs'] 
    }, 
    resolve: { 
     alias: { 
      'jquery': path.join(__dirname, 'node_modules', 'jquery', 'dist', 'jquery.min.js'), 
      'bootstrapjs': path.join(__dirname, 'node_modules', 'bootstrap', 'dist', 'js', 'bootstrap.min.js') 
     } 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: "[name].[chunkhash].bundle.min.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test:/\.js$/, 
       exclude:/node_modules/, 
       include:path.join(__dirname, 'src'), 
       loader:'babel-loader', 
      }, 
      { 
       test:/\.css$/, 
       include:path.join(__dirname, 'src'), 
       loader:'style-loader!css-loader' 
      }, 
      { 
       test:/\.less$/, 
       include:path.join(__dirname, 'src'), 
       loader:'style-loader!css-loader!less-loader' 
      }, 
      { 
       test:/\.(png|woff|woff2|eot|ttf|svg)$/, 
       include:path.join(__dirname, 'src'), 
       loader: 'url-loader?limit=100000' 
      }, 
      { 
       test:/\.(jpe?g|png|gif|svg)$/i, 
       include:path.join(__dirname, 'src'), 
       loader: 'url-loader?limit=100000!img?progressive=true' 
      }, 
      { 
       test:/\.html$/, 
       include:path.join(__dirname, 'src'), 
       loader: 'html-loader' 
      } 
     ] 
    }, 
    devServer: { 
     contentBase: path.join(__dirname, 'dist'), 
     inline: true, 
     stats: 'errors-only' 
    }, 
    plugins: debug ? [ 
     new cleanWebpackPlugin(['dist']), 
     new htmlWebpackPlugin({ 
      template: path.join(__dirname, 'src', 'pages', 'index.html'), 
      hash: true, 
      chunks: 'commons' 
     }), 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery", 
      jquery: "jquery" 
     }), 
     new commonsChunkPlugin({ 
      name: ['commons', 'vendor', 'bootstrap'] 
     }) 
    ] : [ 
     new cleanWebpackPlugin(['dist']), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
     new htmlWebpackPlugin({ 
      template: path.join(__dirname, 'src', 'pages', 'index.html'), 
      hash: true, 
      chunks: 'commons' 
     }), 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery", 
      jquery: "jquery" 
     }), 
     new commonsChunkPlugin({ 
      name: ['commons', 'vendor', 'bootstrap'] 
     }) 
    ] 
}; 

Meine index.webpack.js jetzt eine leere Datei ist.

Ich habe im Grunde immer noch genau die gleichen Probleme wie zuvor, nur benutze ich html-webpack-plugin anstatt alle meine Dateien in der Eingabedatei zu benötigen.

$ ist nicht definiert, obwohl ich es mit ProvidePlugin definiere.

bootstrap css geht nicht durch und es funktioniert nicht, wenn ich es in die Liste der Anbieter gesetzt habe.

irgendwelche Ideen?

Answer 1

Da Ihr Ausgang, wäre jetzt eine gute Zeit zu Webpack 2 und https://webpack.js.org/ für die Dokumentation zu wechseln, die derzeit in der Betaphase und kann den beta Verteilung Tag über mit installieren:

npm install webpack@beta --save 

Großartig, nehmen Sie jetzt einen tiefen Atemzug und lassen Sie uns versuchen, den nächsten Punkt durchzukommen: Sie müssen vergessen, Ihre rohen Anwendungsquellen und Ressourcen zu beliefern und Ihren Webserver immer auf das Ausgabeverzeichnis zu richten (oder einfach webpack-dev-server verwenden). Lass mich versuchen zu erklären.

Webpack ist ein Modulbündler, der bei der Optimierung für den Vertrieb aggressiv ist und fast alle Funktionen von Modulladern abhängig sind. Was Modul Lader tun ist, sie nehmen Ihre statischen Referenzen zu Ihren Quellen oder Vermögenswerten und sie produzieren ein JS-Modul. Oprah Show: CSS Quellen bekommen ein JS Modul und PNGs bekommen ein JS Modul und MP3s bekommen ein JS Modul - jeder bekommt ein Modul \ o /. Dies kann Sie stolpern, wenn Sie es gewohnt sind, Ihre Quellen einfach zu erstellen, Assets zu löschen und Ihren Webserver auf den Root zu verweisen und diese statisch aus HTML zu referenzieren, da dies nicht mit Webpack funktioniert.

Mit file-loader wie dies erhalten Sie nirgends, weil Sie nichts mit der Ausgabe tun.Denken Sie daran, ich sagte, dass alles ein Modul bekommt und was file-loader erzeugt, ist ein Modul, das eine Zeichenfolge an ein Asset exportiert, das in der Ausgabe ist. Als erstes müssen Sie beginnen, diese Ausgaben zu nehmen und sie dann in den HTML-Code einfügen, um die tatsächlichen Referenzen zu erhalten.

Sie sollten erwägen, html-webpack-plugin zu verwenden, um die erforderliche HTML-Vorlage zu erstellen und andere Assets in Ihren JS-Quellen zu benötigen.