まずコードファイルの構造を見てみましょう。エントリファイル (index1.js) の内容:'jquery' から $ をインポートします './css/index.css' をインポートします './less/index.less' をインポートします $(関数() { $('#app li:nth-child(odd)').css('color', 'red') $('#app li:nth-child(even)').css('color', 'green') }) './assets/fonts/iconfont.css' をインポートします。 定数ul = document.querySelector("ul"); 定数 theI = document.createElement("li"); theI.className='アイコンフォント icon-qq'; ul.appendChild(theI); webpack.config.js 構成ファイルの内容:定数パス = require('path'); HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。 モジュール.エクスポート = { //エントリ ファイル アドレス エントリ: './src/index1.js', 出力: { パス: path.resolve(__dirname, 'dist'), //エクスポートファイル名 filename: 'bundle.js', }, プラグイン: [ 新しいHtmlWebpackプラグイン({ テンプレート: './public/interlaced color.html' })], モジュール: { ルール: [{ //.cssで終わるファイルに一致します。iは大文字と小文字を区別しません。テスト: [/\.css$/i], // 右から左に実行します。順序は変更できません。style-loader は CSS を DOM に挿入し、css-loader は @import と url() を処理します。これは js が import/require() を解析するのと同じです。use: ["style-loader", "css-loader"], }, { テスト: /\.less$/i, 使用: [ // LessをCSSにコンパイルする 'スタイルローダー'、 'css-loader', 「ローダーレス」、 ]、 }, { // webpack5 はデフォルトではこれらのファイルを認識しないので、静的リソースとして出力します test: /\.(eot|svg|ttf|woff|woff2)$/, タイプ: '資産/リソース'、 ジェネレータ: { ファイル名: 'font/[name].[hash:6][ext]' } }], }, }; パッケージ化してから、パッケージ化された HTML ファイルを実行します。 CSSスタイルは、jsによって生成されたスタイルタグの形式で追加されていることがわかります。 パッケージを実行すると、lessがcssファイルに変換されますが、cssファイルはjsを通じてスタイルタグで追加されます。次に、cssを分割し、リンクタグで導入します。 ステップ:1. mini-css-extract-pluginをインストールするnpm i mini-css-extract-plugin -D //npm インストール yarn add mini-css-extract-plugin -D //yarn インストール 2. webpack.config.jsファイルで導入して設定する定数パス = require('path'); HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。 //インストールされた mini-css-extract-plugin を導入する const MiniCssExtractPlugin = require("mini-css-extract-plugin"); モジュール.エクスポート = { //エントリ ファイル アドレス エントリ: './src/index1.js', 出力: { パス: path.resolve(__dirname, 'dist'), //エクスポートファイル名 filename: 'bundle.js', }, プラグイン: [新しい MiniCssExtractPlugin(), 新しいHtmlWebpackプラグイン({ テンプレート: './public/interlaced color.html' })], モジュール: { ルール: [{ //.cssで終わるファイルに一致します。iは大文字と小文字を区別しません。テスト: [/\.css$/i], // 右から左に実行します。順序は変更できません。Style-loader は CSS を DOM に挿入し、css-loader は @import と url() を処理します。これは js が import/require() を解析するのと同じです。use: [MiniCssExtractPlugin.loader, "css-loader" ]、 }, { テスト: /\.less$/i, 使用: [ // LessをCSSにコンパイルする MiniCssExtractPlugin.loader、 'css-loader', 「ローダーレス」、 ]、 }, { // webpack5 はデフォルトではこれらのファイルを認識しないので、静的リソースとして出力します test: /\.(eot|svg|ttf|woff|woff2)$/, タイプ: '資産/リソース'、 ジェネレータ: { ファイル名: 'font/[name].[hash:6][ext]' } }], }, }; 知らせ:
3. 分割されたCSSファイルを圧縮する
定数パス = require('path'); HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。 //インストールされた mini-css-extract-plugin を導入する const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //分割を圧縮するために使用されるCSS const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); モジュール.エクスポート = { //エントリ ファイル アドレス エントリ: './src/index1.js', 出力: { パス: path.resolve(__dirname, 'dist'), //エクスポートファイル名 filename: 'bundle.js', }, プラグイン: [新しい MiniCssExtractPlugin()、新しい OptimizeCSSAssetsPlugin({})、 新しいHtmlWebpackプラグイン({ テンプレート: './public/interlaced color.html' })], モジュール: { ルール: [{ //.cssで終わるファイルに一致します。iは大文字と小文字を区別しません。テスト: [/\.css$/i], // 右から左に実行します。順序は変更できません。Style-loader は CSS を DOM に挿入し、css-loader は @import と url() を処理します。これは js が import/require() を解析するのと同じです。use: [MiniCssExtractPlugin.loader, "css-loader" ]、 }, { テスト: /\.less$/i, 使用: [ // LessをCSSにコンパイルする MiniCssExtractPlugin.loader、 'css-loader', 「ローダーレス」、 ]、 }, { // webpack5 はデフォルトではこれらのファイルを認識しないので、静的リソースとして出力します test: /\.(eot|svg|ttf|woff|woff2)$/, タイプ: '資産/リソース'、 ジェネレータ: { ファイル名: 'font/[name].[hash:6][ext]' } }], } }; 4. 包装追加の main.css ファイルを見つけたので、Web ページを開いて表示しました。 main.css ファイルはリンクとしてインポートされ、圧縮されます。 これで、webpack による CSS の分割と圧縮、およびリンクによるインポートに関するこの記事は終了です。より関連性の高い webpack による CSS の分割と圧縮に関するコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Dockerで複数のSpringbootを実行するための詳細なチュートリアル
>>: HTML テーブル マークアップ チュートリアル (15): テーブル タイトル
アプリケーションや Web サイトのパフォーマンスが成功の重要な要素であることは誰もが知っています。...
コードをコピーコードは次のとおりです。 <meta name="viewport&q...
目次1. 現在のシステムにMySQLがインストールされているかどうかを確認する2. インストールされ...
1. 背景プロジェクトの業務が進むにつれて、データベース テーブルの数がどんどん大きくなり、ハードデ...
目次1. 数字を逆にする2. 配列内の最大のn個の数値を取得する3. 階乗を計算する4. 現在の動作...
MySQL 5.7コマンドを使用するMySQLコマンドラインクライアント1. パスワードを入力してく...
目次1.1. MySQL binlog を有効にする1.2. RabbitMQ の交換とキューを構成...
ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...
この記事の例では、カウントダウン機能を実装するためのVueの具体的なコードを参考までに共有しています...
参考までに、mysql 5.7.20 / 5.7.21 をダウンロード、インストール、構成します。具...
タブバー: 異なるタブをクリックすると異なるコンテンツが表示され、クリックしたタブのスタイルが変更さ...
ネットで変更方法をいろいろ調べたのですが、うまくいきませんでした。後で大物から見て削除しました。フォ...
参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な...
Mybatis ファジークエリ実装方法mybatis のリバース アシスタントは非常に使いやすく、通...
1. はじめにこの記事には MySQL インストール部分のスクリーンショットがないので、ある程度の基...