HTML ファイルをパッケージ化するにはどうすればよいですか? HTMLファイルのパッケージ化方法の紹介

この記事の内容は、HTML ファイルをパッケージ化する方法についてです。 HTML ファイルをパッケージ化する方法の紹介は、必要としている友人が参考になれば幸いです。

前の記事で説明したjs圧縮によると、npm runサーバーは実行後にエラーを報告します

この問題を理解するには、まず開発環境とは何か、本番環境とは何かを理解する必要があります。開発環境では基本的にJSは圧縮されませんが、開発プレビューではエラー行数やエラー情報を明示する必要があるため、JavaScriptコードを圧縮する必要はありません。本番環境のみJSコードを圧縮してプログラムの作業効率を向上させます。開発環境では devServer が使用され、本番環境では圧縮 JS が使用されます。開発環境では、本番環境が完了するため、Webpack は競合レポートを設定します。

本番環境の圧縮jsはデバッグできません（行が見つからない）

実際の開発では、webpackの設定ファイルは開発環境用と本番環境用に分かれています。

1. htmlファイルのパッケージ化

• distディレクトリ配下のindex.htmlを切り取ってsrcディレクトリにコピーします(jsコードは自動で導入されます)。これがテンプレートファイルです

• webpack-config.jsにプラグインを導入します

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

  rreee

  上記のコードが表示され成功です

• 以下のようにパッケージ化が成功しています

  
  

  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

• ターミナルで dist ディレクトリを削除します パッケージ化のために webpack を入力します

• ターミナルで npm run dev と入力し、ブラウザで実行します

• プラグインの設定は次のとおりです:

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

• ターミナルにインストールします: npm install –save-dev html-webpack-plugin

• HTML を構成します

  
  

関連する推奨事項:

独自に作成しますHTML を作成し、Cordova でパッケージ化し、AppCan、Dcloud、WeX5、ApiCloud を使用します。違いは何ですか?

CSS ファイルをパッケージ化するには? CSSファイルをパッケージ化する方法

以上がHTML ファイルをパッケージ化するにはどうすればよいですか? HTMLファイルのパッケージ化方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。