Comment empaqueter des fichiers HTML ? Introduction à la méthode de packaging des fichiers HTML

Le contenu de cet article explique comment empaqueter des fichiers HTML ? L'introduction à la méthode d'empaquetage des fichiers HTML a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

Selon la compression js mentionnée dans l'article précédent , le serveur npm run signalera une erreur après l'avoir exécuté

Pour comprendre ce problème, il faut d'abord comprendre Savoir ce qu'est un environnement de développement et ce qu'est un environnement de production. JS n'est fondamentalement pas compressé dans l'environnement de développement. Lors de l'aperçu du développement, nous devons indiquer clairement le nombre de lignes d'erreur et les informations sur les erreurs, il n'est donc pas nécessaire de compresser le code JavaScript. Ce n'est que dans l'environnement de production que le code JS sera compressé pour accélérer l'efficacité du programme. devServer est utilisé dans l'environnement de développement, tandis que JS compressé est utilisé dans l'environnement de production. Dans l'environnement de développement, l'environnement de production est terminé, donc Webpack configure le reporting des conflits.

Les js compressés dans l'environnement de production ne pourront pas être débogués (la ligne est introuvable)

Dans le développement réel, les fichiers de configuration du webpack sont séparés, un fichier pour l'environnement de développement et un fichier pour l’environnement de production.

1. Packaging des fichiers html

• Coupez et copiez le index.html sous le répertoire dist dans le répertoire src, et le js introduit dans index. html Le code peut être supprimé (le code js sera automatiquement introduit). Il s'agit du fichier modèle

• Présentez le plug-in

   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

  . Lorsque le code ci-dessus apparaît, il réussit

Comme indiqué ci-dessous, le package réussit

• 
  

  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

Supprimez le répertoire dist et entrez webpack dans le terminal pour packager
Saisissez npm run dev dans le terminal et exécutez-le dans le navigateur
La configuration dans les plugins est la suivante :
const htmlPlugin=require('html-webpack-plugin');
Installer dans le terminal : npm install –save- dev html-webpack-plugin
Configurer le html

• 
  

Recommandations associées :

Quelle est la différence entre écrire du HTML vous-même et l'emballer avec Cordova et utiliser AppCan, Dcloud, WeX5 ou ApiCloud ?

Comment empaqueter des fichiers CSS ? Comment empaqueter des fichiers CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!