まずコードファイルの構造を見てみましょう。エントリファイル (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): テーブル タイトル
フロントエンド開発者がよく遭遇する問題は、ユーザーに情報を提示するためのポップアップ ウィンドウを作...
方法1: 値を追加する公式の説明を見るには MDN にアクセスしてください。優先度はどのように計算さ...
今日皆さんにお伝えしたいトピックは、「皆さんがよく話題にするテーブル スペースとは一体何でしょうか。...
最近プロジェクトが中断され、RageFrame の研究は一時的に終了しました。この記事では、シングル...
テクノロジーの活用itext.jar: バイト ファイル入力ストリームを画像、PDF などに変換しま...
目次1. Nginx の紹介1. Nginx とは何ですか? 2. Nginx を使用する理由3. ...
テーブルはいつ使用されますか?最近では、Web ページの全体的なレイアウトにテーブルが使用されること...
目次導入リンク始めるコードを読み進めてくださいプロキシ設定傍受を要求する異なるプレフィックスを持つイ...
目次1. ノードをインストールする2. Commander.jsをインストールする3. JavaSc...
NERDTree は Vim 用のファイル システム ブラウザーです。このプラグインを使用すると、ユ...
1. 背景1. フロントエンドはvue + vuex + socket.io-clientを使用しま...
目次1. 背景2. 複合インデックスを理解する3. 左端一致原則4. フィールド順序の影響5. 単一...
序文通知バー コンポーネントは、比較的一般的なコンポーネントです。基本的に、すべてのサイトにこのよう...
イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...
1. なぜパッケージングを行うのですか?全体的なコード呼び出し、リクエストの公開処理、パーソナライズ...