HTML リソースを Webpack に圧縮してパッケージ化する方法について話しましょう-jsチュートリアル-php.cn

HTML リソースをパッケージ化する必要があるのはなぜですか?

Webpack で HTML リソースを圧縮してパッケージ化する方法

圧縮およびパッケージ化された HTML リソースの例

ホームページ

ウェブフロントエンド

jsチュートリアル

HTML リソースを Webpack に圧縮してパッケージ化する方法について話しましょう

青灯夜游

Aug 09, 2022 pm 07:44 PM

webpack

HTML リソースを Webpack に圧縮してパッケージ化するにはどうすればよいですか? webpackを使用してHTMLリソースを圧縮してパッケージ化する方法については、以下の記事で簡単に紹介していますので、ご参考になれば幸いです。

HTML リソースを Webpack に圧縮してパッケージ化する方法について話しましょう

HTML リソースをパッケージ化する必要があるのはなぜですか?

コードを記述するとき、src の下に js ファイルが導入されます。 webpackでパッケージ化するとエントリファイルが作成されますが、このときhtml内のjsファイルの名前とパスが間違っているため、html内に導入されているjsファイルのパスをwebpackパッケージングで置き換える必要があります。

webpack を使用して HTML をパッケージ化する利点は次のとおりです:

(1) パッケージ化された js ファイルを html

(2) に自動的に導入できます。 HTML パッケージ化 HTML パッケージ化は引き続きビルドフォルダー内に生成され、パッケージ化された js ファイルと一緒にまとめられます。この方法では、オンラインにするときは、パッケージ化され生成されたフォルダーをオンライン環境にコピーするだけで済みます。

( 3) HTML ファイルの圧縮に役立ちます

Webpack で HTML リソースを圧縮してパッケージ化する方法

1. プラグインをインストールします

Webpack は、JS および JSON ファイルをネイティブに理解することしかできません。他のタイプのファイルのパッケージ化をサポートするには、対応するプラグインまたはローダーをインストールする必要があります。

HTML ファイルをパッケージ化する必要がある場合は、まず html-webpack-pluginプラグイン:

npm install html-webpack-plugin -D

ログイン後にコピー

このプラグインの役割:

デフォルトでは、エクスポートの下に html ファイルが作成され、その後、すべての JS/CSS リソースがインポートされます。
html ファイルを自分で作成し、この html ファイルにリソースを追加します

2. Webpack.config.js 設定

html-webpack-plugin プラグイン最後に、webpack.config.js ファイルで構成する必要があります:

 // ...
 // 1. 引入插件
 const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
 
 module.exports = {
   // ...
   // 2. 在plugins中配置插件
   plugins: [
     new HtmlWebpackPlugin({
       template: &#39;index.html&#39;, // 指定入口模板文件（相对于项目根目录）
       filename: &#39;index.html&#39;, // 指定输出文件名和位置（相对于输出目录）
       // 关于插件的其他项配置，可以查看插件官方文档
     })
   ]
 }

ログイン後にコピー

詳細な構成リンク: https://www.npmjs.com/package/html-webpack-plugin

エントリテンプレートファイルのパスとファイル名が構成と一致していることを確認すると、コンパイルできます。

3. 複数の JS エントリと複数の HTML 状況の構成

複数の HTML ファイルをコンパイルする必要があり、ファイルが必要な場合さまざまな JS ファイルを導入しますが、デフォルトでは、パッケージ化された HTML ファイルがすべてのパッケージ化された JS ファイルをインポートするため、chunk を指定して JS を割り当てることができます。

 const path = require(&#39;path&#39;);
 // 1. 引入插件
 const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
 module.exports = {
   // ...
   // 2. 配置JS入口(多入口)
   entry: {
     vendor: [&#39;./src/jquery.min.js&#39;, &#39;./src/js/common.js&#39;],
     index: &#39;./src/index.js&#39;,
     cart: &#39;./src/js/cart.js&#39;
   },
   // 配置出口
   output: {
     filename: &#39;[name].js&#39;,
     path: path.resolve(__dirname, &#39;build/js&#39;)
   },
   // 3. 配置插件
   plugins: [
     new HtmlWebpackPugin({
       template: &#39;index.html&#39;,
       filename: &#39;index.html&#39;,
       // 通过chunk来指定引入哪些JS文件
       chunk: [&#39;index&#39;, &#39;vendor&#39;]
     }),
     // 需要编译多少个HTML，就需要new几次插件
     new HtmlWebpackPlugin({
       template: &#39;./src/cart.html&#39;,
       filename: &#39;cart.html&#39;,
       chunk: [&#39;cart&#39;, &#39;vendor&#39;]
     })
   ]
 }

ログイン後にコピー

ヒント: ここで注意する必要があるのは、コンパイルする必要がある HTML ファイルの数と、HtmlWebpackPlugin を新規に作成する必要がある回数です。

上記の構成が正常にコンパイルされると、出力は次のようになります:

 build
 |__ index.html # 引入index.js和vendor.js
 |__ cart.html    # 引入cart.js和vendor.js
 |__ js
      |__ vendor.js # 由jquery.min.js和common.js生成
      |__ index.js    # 由index.js生成
      |__ cart.js       # 由cart.js生成

ログイン後にコピー

圧縮およびパッケージ化された HTML リソースの例

1。 webpack.config.js 構成

const HTMLWebpackPlugin = require(&#39;html-webpack-plugin&#39;)
...
 plugins: [
    // html-webpack-plugin  html 打包配置 该插件将为你生成一个 HTML5 文件
    new HTMLWebpackPlugin({
      template: "./index.html", // 打包到模板的相对或绝对路径 （打包目标）
      title: &#39;首页&#39;, // 用于生成的HTML文档的标题
      hash: true,//true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。主要用于清除缓存,
      minify: {  // 压缩html
        collapseWhitespace: true, // 折叠空白区域
        keepClosingSlash: true,  // 保持闭合间隙
        removeComments: true,   // 移除注释
        removeRedundantAttributes: true, // 删除冗余属性
        removeScriptTypeAttributes: true,  // 删除Script脚本类型属性
        removeStyleLinkTypeAttributes: true, // 删除样式链接类型属性
        useShortDoctype: true, // 使用短文档类型
        preserveLineBreaks: true, // 保留换行符
        minifyCSS: true, // 压缩文内css
        minifyJS: true, // 压缩文内js
      }
    }),
  ],
...

ログイン後にコピー

2.この時点では、index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>webpackDemo</title>
  </head>
  <body>
    <div id="app">
      html 打包配置
    </div>
  </body>
</html>

ログイン後にコピー

3.この時点では、index.js

import &#39;./../css/index.less&#39;

function add(x,y) {
 return x+y
}
console.log(add(2,3));

ログイン後にコピー

3.コンソール Webpack 入力package を実行すると、パッケージ化された出力ファイルに余分な Index.html があることがわかりました。内容は次のとおりです。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>webpackDemo</title>
  <script defer src="index.js"></script></head>
  <body>
    <div id="app">
      html 打包配置
    </div>
  </body>
</html>

ログイン後にコピー

<script defer src="index.js">< /script></script> は自動です。導入された

ブラウザは、パッケージ化された出力のindex.html を開き、スタイルが効果を持っていることを確認し、コントロールユニットも正常に出力しました。

HTML リソースを Webpack に圧縮してパッケージ化する方法について話しましょう

プログラミング関連の知識については、プログラミングビデオをご覧ください。！

以上がHTML リソースを Webpack に圧縮してパッケージ化する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7663

CakePHP チュートリアル

1393

C# チュートリアル

1205

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

VUE3 入門チュートリアル: Webpack を使用したパッケージ化とビルド Jun 15, 2023 pm 06:17 PM

Vue は、インタラクティブで効率的な Web アプリケーションを迅速に構築するのに役立つ優れた JavaScript フレームワークです。 Vue3 は、多くの新機能が導入された Vue の最新バージョンです。 Webpack は現在最も人気のある JavaScript モジュールパッケージャーおよびビルドツールの 1 つで、プロジェクト内のさまざまなリソースの管理に役立ちます。この記事では、Webpack を使用して Vue3 アプリケーションをパッケージ化してビルドする方法を紹介します。 1.Webpackをインストールする

vite と webpack の違いは何ですか Jan 11, 2023 pm 02:55 PM

相違点: 1. Webpack サーバーの起動速度は Vite より遅いですが、Vite は起動時にパッケージ化する必要がなく、モジュールの依存関係を解析してコンパイルする必要がないため、起動速度が非常に速くなります。 2. Vite ホットアップデートは webpack よりも高速です。Vite の HRM の観点から、特定のモジュールのコンテンツが変更された場合、ブラウザーにモジュールを再リクエストさせるだけです。 3. Vite は esbuild を使用して依存関係を事前構築しますが、webpack はノードに基づいています。 4. Vite のエコロジーは webpack ほど良くなく、ローダーとプラグインが十分に豊富ではありません。

モジュール開発に PHP と webpack を使用する方法 May 11, 2023 pm 03:52 PM

Web 開発テクノロジーの継続的な発展に伴い、フロントエンドとバックエンドの分離とモジュール開発が広く普及する傾向になりました。 PHP は一般的に使用されるバックエンド言語です。モジュラー開発を行う場合、モジュールの管理とパッケージ化にいくつかのツールを使用する必要があります。Webpack は非常に使いやすいモジュラーパッケージングツールです。この記事では、モジュール開発に PHP と webpack を使用する方法を紹介します。 1. モジュラー開発とは何ですか? モジュラー開発とは、プログラムを、それぞれが独自の機能を持つ独立したモジュールに分解することを指します。

Webpack はどのように es6 モジュールを es5 モジュールに変換しますか? Oct 18, 2022 pm 03:48 PM

設定方法: 1. import メソッドを使用して ES6 コードをパッケージ化された js コードファイルに配置します; 2. npm ツールを使用して babel-loader ツールをインストールします。構文は「npm install -D babel-loader @babel/core」です。 @babel/preset-env"; 3. babel ツールの構成ファイル「.babelrc」を作成し、トランスコーディングルールを設定します。 4. webpack.config.js ファイルでパッケージ化ルールを構成します。

Spring Boot と Webpack を使用してフロントエンドプロジェクトとプラグインシステムを構築する Jun 22, 2023 am 09:13 AM

最新の Web アプリケーションの複雑さが増すにつれて、優れたフロントエンドエンジニアリングとプラグインシステムを構築することがますます重要になっています。 Spring Boot と Webpack の人気により、これらはフロントエンドプロジェクトとプラグインシステムを構築するための完璧な組み合わせになりました。 SpringBoot は、最小限の構成要件で Java アプリケーションを作成する Java フレームワークです。自動構成などの多くの便利な機能を提供するため、開発者は Web アプリケーションをより迅速かつ簡単に構築および展開できます。 W

vwebpack パッケージに使用できるファイルは何ですか? Dec 20, 2022 pm 07:44 PM

vue では、webpack は js、css、ピクチャ、json、その他のファイルをブラウザで使用できる適切な形式にパッケージ化できます。webpack では、js、css、ピクチャ、json、その他のファイルタイプをモジュールとして使用できます。 Webpack のさまざまなモジュールリソースは、パッケージ化して 1 つ以上のパッケージにマージでき、パッケージ化プロセス中に、画像の圧縮、scss から css への変換、ES6 構文から ES5 への変換などのリソースを処理できます。 HTMLで認識されるファイルタイプ。