Webpack 4 und Aufteilen der Konfigurationsdatei in Module

Hallo Habr! Heute werde ich Ihnen Webpack 4 mit Codetrennung in separate Module sowie interessante Lösungen vorstellen, mit denen Sie Ihre Webpack 4-Assembly schneller erstellen können. Am Ende werde ich meiner grundlegenden Webpack-Assembly die wichtigsten Tools zur Verfügung stellen, die Sie später verwenden können zu erweitern. Diese Assembly hilft Ihnen beim Verständnis dieses Materials und kann Ihnen auch dabei helfen, Ihre Implementierung schneller zu schreiben und mögliche Probleme schneller zu lösen.

Die Hauptideologie dieser Assembly ist die korrekte Trennung des Codes in der Konfigurationsdatei, um die Verwendung, das Lesen und die Sauberkeit von webpack.config.js zu vereinfachen. Die erforderlichen Module und Plugins für die Entwicklungs- und Produktversionen (sowie zum Trennen der Funktionalität in der Hauptdatei) werden in einem separaten Webpack-Ordner gespeichert und daraus importiert, um eine Verbindung zur Hauptkonfiguration herzustellen.

Warum ist dieser Ansatz erforderlich?

Mit der allmählichen Zunahme der Anzahl von Modulen, Plug-Ins usw., die Ihre Assembly auf dem Webpack aufbaut, wächst die Konfigurationsdatei wie ein Sprung. Mit der Zeit wird es schwieriger, diese Datei zu lesen, und das Ändern für ein bestimmtes Projekt, wenn einige Module nicht darin verwendet werden, wird schwieriger, aber Sie möchten etwas Universelles. Daher ist eine klare Organisation des Codes erforderlich.

Was brauchen wir

Wir werden das Webpack-Merge- Plugin verwenden.

Wir erstellen den Webpack-Ordner und nehmen alle einzelnen Module in separate Dateien auf. Zum Beispiel webpack / pug.js, webpack / scss.js und exportieren Sie diese Funktionen aus ihnen.

Pug.js Datei

module.exports = function() { return { module: { rules: [ { test: /\.pug$/, loader: 'pug-loader', options: { pretty: true, }, }, ], }, }; }; 

Die Datei webpack.config.js . In dieser Datei verbinden wir sie und mit Hilfe dieses Plugins verbinden wir bequem und schnell.

 const merge = require('webpack-merge'); const pug = require('./webpack/pug'); const common = merge([ { entry: { 'index': PATHS.source + '/pages/index/index.js', 'blog': PATHS.source + '/pages/blog/blog.js', }, output: { path: PATHS.build, filename: './js/[name].js', }, plugins: […], optimization: { … }, }, pug(), ]); 

Wenn wir nun eine neue Aufgabe haben, für die wir ein neues Modul, Plug-In und Loader benötigen, bringen wir sie zum Hotelmodul (Datei), legen sie im Webpack-Ordner ab und verbinden sie mit der Hauptkonfigurationsdatei, um die Konfiguration so sauber wie möglich zu halten.

Einstellungen für Produktion und Entwicklung

Mit Hilfe des banalen if werden wir nun unsere angestrebte Trennung beenden und unser Webpack für diese beiden Entwicklungstypen konfigurieren, um die Verwendung dieses Tools endlich bequem zu machen. Außerdem können wir es in Zukunft flexibel und einfach für jedes andere Projekt konfigurieren. oder erweitern Sie in der aktuellen. Zum Exportieren in einen Knoten (für das Webpack selbst) in Webpack 4 verwenden wir die folgende Konstruktion:

 module.exports = function(env, argv) { if (argv.mode === 'production') { return merge([ common, extractCSS(), favicon(), ]); } if (argv.mode === 'development') { return merge([ common, devserver(), sass(), css(), sourceMap(), ]); } 

Im gemeinsamen Objekt verbinden wir das, was sowohl im Produkt als auch in der Entwicklung verwendet wird, und unter den Bedingungen verbinden wir nur die Module, die in diesen Fällen erforderlich sind.

Jetzt möchte ich über die Hauptfunktionen von Webpack 4 in Bezug auf Webpack 3 sprechen

• Für einen schnellen Start benötigt webpack 4 nicht webpack.config.js, sondern nur noch einen Einstiegspunkt (index.js).
• In der neuen Version befindet sich die Webpack-Befehlszeilenschnittstelle in einem separaten Paket, und Sie müssen webpack-cli installieren.
• Um Webpack 4 auszuführen, müssen Sie (andernfalls eine Warnung) in den Skripten den Modus (Betriebsmodus) - Produktionsmodus oder - Modusentwicklung angeben. Je nach Schlüssel ändert sich der Betrieb des Webpacks. Der Entwicklungsmodus zielt darauf ab, den Build zu beschleunigen. In der Produktionsversion zielt alles auf die endgültige Minimierung des Codes ab.
• Um die Dateien common.js und common.css zu erstellen, wird CommonsChunkPlugin nicht mehr verwendet. SplitChunks sind jetzt dafür verantwortlich und die folgende Konstruktion wird verwendet:
  
  

    optimization: { splitChunks: { cacheGroups: { 'common': { minChunks: 2, chunks: 'all', name: 'common', priority: 10, enforce: true, }, }, }, }, 

  
  In Webpack 3 - das wäre so in Plugins:
  
  

   new webpack.optimize.CommonsChunkPlugin({ name: 'common ', }) 

  
  Dementsprechend verbinden wir uns in den Chunks in HtmlWebpackPlugin (hier ohne Änderungen).
  
  

   plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['index', 'common'], template: PATHS.source + '/pages/index/index.pug', }), ], 

  
  
• Der nächste wichtige Punkt, um sourceMap zu erstellen, ist jetzt der folgende Ansatz: Erstellen Sie die Datei sourceMap.js im Webpack-Ordner und verbinden Sie sie beispielsweise in der Entwicklungsversion (wie oben erwähnt):
  
  

   module.exports = function() { return { devtool: 'eval-sourcemap', }; }; 

Jetzt nähern sich die Plugins: [new webpack.optimize.UglifyJsPlugin ({})] funktioniert nicht.

Damit möchte ich meine Geschichte vervollständigen und meine Grundmontage bereitstellen - einen Link zu Webpack 4, der Ihnen wahrscheinlich bei Ihrer Arbeit und Entwicklung helfen wird. Vielen Dank für Ihre Aufmerksamkeit!