Webpack および SPA で CSS およびその他のリソースを管理する方法-jsチュートリアル-php.cn

この記事では、Webpack や SPA の実践で CSS やその他のリソースを管理する方法を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

前回の記事では、ローカルサービス、自動更新、モジュールのホットリプレースをサポートする安定した開発環境を構築するための webpack の使用方法と、ES6 を使用した JavaScript の記述について紹介しました。この記事では、webpack がどのように処理するかを主に紹介します。 HTML アプリケーション。3 つの要素のうちのもう 1 つの要素 - CSS および画像、フォントファイル、データ構成ファイルなどのその他のリソース。

前書き

Webpack の使い方を学ぶときは、Webpack がどのように設計されているか、その動作原理とプロセスが何であるかに関係なく、Webpack が扱う最も基本的なものは HTML タグ、JavaScript、CSS、画像であることを理解する必要があります。などを HTML ドキュメント内に含め、最終的な処理結果も DOM、JavaScript、CSS を含む HTML ドキュメントである必要があります。CSS をドキュメント内に存在させる方法は、インラインスタイル、インラインスタイル、および CSS の 3 つです。外部リンクスタイル。インラインスタイルの使用は以前から変更されており、Webpack で CSS を処理するには次の 2 つの方法があります。

スタイルを HTML ドキュメントに埋め込みます。外部リンクスタイル: < link> タグを通じて CSS ファイルをパッケージ化して生成します
webpack が処理できるのは JavaScript だけであり、他のリソースについてはローダーとプラグインを使用する必要があることがわかっています。 -ins を使用してそれらを JavaScript モジュールに処理し、依存関係管理をモジュール化します。 Webpack は、モジュラー CSS をサポートするために、style-loader と css-loader という 2 つのローダーを提供するため、他のモジュールに直接導入できます。

インストール

npm install --save-dev style-loader css-loader

ログイン後にコピー

設定

webpack設定ファイルのモジュールローダーオプションに次の設定を追加します:

  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  }

ログイン後にコピー

もちろん、参照パスの使用を容易にするために、パスを設定することもできますフラグメントエイリアス:

  alias: {
    styles: path.resolve(__dirname, &#39;src/styles/&#39;)
  }

ログイン後にコピー

現時点では、import 'styles/index.css'; は、import '../src/styles/indx などの相対パスを使用することと同じです。 css';

使用

設定後、styles ディレクトリにindex.css ファイルを作成すると、CSS を JavaScript ファイルに直接導入できるようになります: import 'styles/index.css' ; または require('styles/index.css') ;

CSS の内容は次のとおりです: import 'styles/index.css';等同于使用相对路径，如import '../src/styles/indx.css';

使用

配置好以后，假如我们在styles目录下创建了一个index.css文件，现在可以在JavaScript文件中直接引入该CSS: import 'styles/index.css'; 或 require('styles/index.css');

css内容如下：

  html, body {
    width: 100%;
    height: 100%;
  }
  .container {
    color: red;
  }

ログイン後にコピー

页面展示如图：

内联样式

前面提到了webpack处理CSS的方式有两种，第一种是以内联方式在页面标签内动态插入