Wie packe ich HTML-Dateien? Einführung in die Methode zum Packen von HTML-Dateien

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man HTML-Dateien verpackt. Die Einführung in die Methode zum Packen von HTML-Dateien hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

Gemäß der im vorherigen Artikel erwähnten js-Komprimierung meldet der npm-Run-Server nach dem Ausführen einen Fehler

Um dieses Problem zu verstehen, müssen wir zuerst Finden Sie es heraus. Wissen Sie, was eine Entwicklungsumgebung und was eine Produktionsumgebung ist. JS wird in der Entwicklungsumgebung grundsätzlich nicht komprimiert. Während der Entwicklungsvorschau müssen wir die Anzahl der Fehlerzeilen und Fehlerinformationen klar angeben, sodass keine Komprimierung des JavaScript-Codes erforderlich ist. Nur in der Produktionsumgebung wird JS-Code komprimiert, um die Arbeitseffizienz des Programms zu beschleunigen. devServer wird in der Entwicklungsumgebung verwendet, während komprimiertes JS in der Produktionsumgebung verwendet wird. In der Entwicklungsumgebung wird die Produktionsumgebung erstellt, sodass Webpack die Konfliktberichterstattung einrichtet.

Komprimierte js in der Produktionsumgebung können nicht debuggt werden (die Zeile kann nicht gefunden werden)

In der tatsächlichen Entwicklung sind die Webpack-Konfigurationsdateien getrennt, eine Datei für die Entwicklungsumgebung und eine Datei für die Produktionsumgebung.

1. Packen von HTML-Dateien

• Schneiden Sie die Datei index.html aus dem Verzeichnis dist aus und kopieren Sie sie in das Verzeichnis src, und fügen Sie die js in den Index ein. html Der Code kann gelöscht werden (JS-Code wird automatisch eingeführt), dies ist die Vorlagendatei

• Führen Sie das Plug-in in webpack-config.js ein

   plugins:[
         new htmlPlugin({
            minify：{
                removeAttributeQuotes:true       //对html进行压缩，去掉属性的双引号
            },
            hash:true,      //为了开发中js有缓存效果，加入hash可以有效避免缓存JS
            template:'./src/index.html'      //是要打包的html模板路径和文件名称
        })
      ]

  i ｢wds｣: Project is running at http://10.212.109.18:8087/
   i ｢wds｣: webpack output is served from /
   i ｢wds｣: Content not from webpack is served from F:\webLearn\webpackLearn\dist
   ‼ ｢wdm｣: Hash: 027dd749b565ba3b200d
   Version: webpack 4.15.1
   Time: 3008ms
   Built at: 2018-07-11 08:49:13
    Asset       Size  Chunks             Chunk Names
   entry2.js    139 KiB       0  [emitted]  entry2
   entry.js    145 KiB       1  [emitted]  entry index.html  427 bytes          [emitted]
   Entrypoint entry = entry.js
   Entrypoint entry2 = entry2.js

  Der obige Code wird angezeigt. Das heißt, er ist erfolgreich

• Wie unten gezeigt, ist die Verpackung erfolgreich

  
  

  Hash: 40112e2b8d4dc81b512b
  Version: webpack 4.15.1
  Time: 5299ms
  Built at: 2018-07-11 08:47:26
  Asset       Size  Chunks             Chunk Names
  entry2.js  962 bytes       0  [emitted]  entry2
  entry.js   6.75 KiB       1  [emitted]  entry
  index.html  427 bytes          [emitted]
  [0] ./src/entry2.js 33 bytes {0} [built]
  [4] ./node_modules/css-loader!./src/css/index.css 227 bytes {1} [built]
  [5] ./src/css/index.css 1.06 KiB {1} [built]
  [6] ./src/entry.js 94 bytes {1} [built]
  + 3 hidden modules
  
  WARNING in configuration
  The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
  You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
  Child html-webpack-plugin for "index.html": 1 asset
  [0] (webpack)/buildin/module.js 497 bytes {0} [built]
  [1] (webpack)/buildin/global.js 489 bytes {0} [built]
  [3] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 511 bytes {0} [built]
  + 1 hidden module

• Löschen Sie das dist-Verzeichnis und führen Sie es im Terminal aus. Geben Sie webpack zum Verpacken ein

• Geben Sie npm run dev im Terminal ein und führen Sie es im Browser aus

• Die Konfiguration in Plugins ist wie folgt:

• const htmlPlugin=require('html-webpack-plugin');

• Im Terminal installieren: npm install –save-dev html-webpack-plugin

• HTML konfigurieren

  
  

Verwandte Empfehlungen:

Schreiben Sie Ihr eigenes HTML und verpacken Sie es mit Cordova. Was sind die Unterschiede zwischen der Verwendung von AppCan, Dcloud, WeX5 und ApiCloud?

Wie packe ich CSS-Dateien? So packen Sie CSS-Dateien

Das obige ist der detaillierte Inhalt vonWie packe ich HTML-Dateien? Einführung in die Methode zum Packen von HTML-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!