コードを記述するときに、webpackのパッケージ化後に、jsファイルの名前とパスが間違っているため、webpackが作成されます。をパッケージ化する必要があり、インポートされた js ファイルへのパスが置き換えられています。
webpack を使用して html をパッケージ化する利点は次のとおりです:
(1) パッケージ化された js ファイルを html に自動的に導入できる
(2) html がパッケージ化された後も、ビルド フォルダーに生成され、パッケージ化された js ファイルとまとめられます。これにより、オンラインになったときに、パッケージ化によって生成されたフォルダーをオンライン環境にコピーするだけで済みます
。 (3) これは、HTML ファイルの圧縮に役立ちます。
Webpack をネイティブに
インストールします。
は JS および JSON ファイルのみを理解でき、他のファイルのパッケージ化をサポートする必要があります。すべての種類のファイルは、対応するプラグインまたはローダーをインストールする必要があります。
HTML ファイルをパッケージ化する必要がある場合は、まずhtml-webpack-pluginプラグインをインストールする必要があります:
npm install html-webpack-plugin -D
このプラグインの役割:
デフォルトでエクスポートの下に HTML ファイルを作成します。
2.
html-webpack-pluginプラグインをインストールした後、Webpack.config.js の設定を行う必要があり
ます
。
webpack.config.jsファイルで設定します:
// ...
// 1. プラグインを導入します const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
// 2. plugins でプラグインを設定します: [
new HtmlWebpackPlugin({
template: 'index.html', // エントリ テンプレート ファイルを指定します (プロジェクトのルート ディレクトリに相対)
filename: 'index.html', // 出力ファイルの名前と場所を指定します (出力ディレクトリからの相対位置)
// プラグインのその他の設定項目については、プラグインの公式ドキュメントを参照してください})
】
詳細な設定リンク: https://www.npmjs.com/package/html-webpack-plugin
エントリ テンプレート ファイルのパスとファイル名が設定と一致していることを確認すると、コンパイルできます。
3. 複数の JS エントリと複数の HTML シチュエーションを設定する場合
、複数の HTML ファイルをコンパイルする必要があり、それらのファイルは異なる JS ファイルをインポートする必要があります。ただし、 chunkでは、パッケージ化された HTML ファイルはすべてのパッケージ化された JS ファイルをインポートします。 JSを配布するために指定します。
const パス = require('パス');
// 1. プラグインを導入します const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
// 2. JSエントリの設定(複数エントリ)
エントリ: {
ベンダー: ['./src/jquery.min.js'、'./src/js/common.js']、
インデックス: './src/index.js',
カート: './src/js/cart.js'
}、
//エクスポート出力を構成します: {
ファイル名: '[名前].js',
パス: path.resolve(__dirname, 'build/js')
}、
// 3. プラグインを設定します: [
new HtmlWebpackPugin({
テンプレート: 'index.html'、
ファイル名: 'index.html'、
// チャンクを使用して、チャンクをインポートする JS ファイルを指定します: ['index', 'vendor']
})、
// コンパイルする必要がある HTML の数、新しいプラグインが必要な数 new HtmlWebpackPlugin({
テンプレート: './src/cart.html',
ファイル名: 'cart.html',
チャンク: ['カート', 'ベンダー']
})
】
ヒント: ここで注意する必要があるのは、コンパイルする必要がある HTML ファイルの数と、新しい
HtmlWebpackPluginを何回作成する必要があるかです。
上記の設定が正常にコンパイルされると、出力は次のようになります
。
|__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 #1、webpack。 config.js 設定
const HTMLWebpackPlugin = require('html-webpack-plugin')
...
プラグイン: [
// html-webpack-plugin html パッケージ化設定 このプラグインは HTML5 ファイルを生成します new HTMLWebpackPlugin({
template: "./index.html", // テンプレートにパッケージ化される相対パスまたは絶対パス（パッケージ化対象）
title: 'Home', // 生成された HTML ドキュメントに使用されるタイトル hash: true, //true は、含まれるすべてのスクリプトと CSS ファイルに一意の Webpack コンパイル ハッシュを追加します。主にキャッシュのクリアに使用されますが、
minify: { // HTMLを圧縮
CollapseWhitespace: true, // 空白を折りたたむ keepClosingSlash: true, // 閉じたギャップを保持しますremoveComments: true, // コメントを削除しますremoveRedundantAttributes: true, // 冗長な属性を削除しますremoveScriptTypeAttributes: true, // スクリプト スクリプト タイプ属性を削除しますremoveStyleLinkTypeAttributes: true, // スタイル リンク タイプ属性を削除します useShortDoctype: true, // ショート ドキュメント タイプを使用しますpreserveLineBreaks: true, // 改行を保持します minifyCSS: true, // テキスト内 CSS を圧縮します
minifyJS: true, // テキスト内の js を圧縮します
}
})、
]、
... 2. 現時点では、index.html
<!DOCTYPE html>
<html lang="">
<頭>
<meta charset="utf-8">
<meta http-equiv="X-UA 互換" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpackDemo</title>
</head>
<本文>
<div id="アプリ">
html パッケージ化設定</div>
</body>
</html> 3. 現時点では、index.js
インポート './../css/index.less'
関数 add(x,y) {
x+yを返す
}
console.log(add(2,3)); 3. コンソール Webpack にパッケージを入力すると、パッケージ出力ファイルに追加のindex.html が含まれていることを確認します。内容は次のとおりです。
<!DOCTYPE html>
<html lang="">
<頭>
<meta charset="utf-8">
<meta http-equiv="X-UA 互換" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpackDemo</title>
<script defer src="index.js"></script></head>
<本文>
<div id="アプリ">
html パッケージ化設定</div>
</body>
</html> <script defer="" src="index.js"></script>が
ブラウザに自動的に導入され、パッケージ化された出力index.html が開きます。このスタイルが影響していることがわかります。ユニットも通常どおり出力します。
