Webpack のスタイル処理の共有

この記事では、主に webpack のスタイルの処理に関する簡単な説明を紹介します。編集者はそれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

js にスタイル ファイルを導入できます

require('myStyle.css')

現時点では、このコードの解析を支援するために、対応する webpack ローダーを導入する必要があります。

style-loaderを使用したcss-loader

まず、css解析を処理するためのcss-loaderとstyle-loaderを導入できます。そのうち、css-loaderはcssファイルを解析するために使用され、style-loaderはcss ファイルを解析するために使用されます。 css ファイルは js ファイルに埋め込まれています

var path = require('path')
module.exports = {
 context: path.join(__dirname, 'src')
 entry: './',
 module: {
 rules: [
  {
  test: /\.css$/,
  include: [
   path.join(__dirname, 'src')
  ],
  use: ['style-loader', 'css-loader']
  }
 ]
 },
 output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].bundle.[hash].js'
 }
}

上記のコードでは、解析順序は最初に css-loader を使用して css ファイルを解析し、次に style を使用します。 -loader を使用して JS コードに埋め込みます。

less を使用してスタイルを記述する場合は、まずless-loader を使用してスタイル ファイルを css ファイルにコンパイルし、その後引き続き css-loader と style-loader を使用する必要があります。また、ローダーloaderは以下の-loaderを省略することができます。したがって、上記のコードは

module: {
 rules: [
 {
  test: /\.css$/,
  include: [
  path.join(__dirname, 'src')
  ],
  use: ['style', 'css', 'less']
 }
 ]
}

と省略できます。 一般に、テスト環境では、CSS をより速くコンパイルするために、この方法がより頻繁に使用されますが、この方法でコンパイルされた js ファイルは比較的大きくなります。で使用される本番環境には適していません。

個別のファイルにコンパイルする

上記のアプローチでは、css と js を一緒にパッケージ化し、実際のリクエストの数を減らしますが、コンパイルされた js ファイルは比較的大きいため、帯域幅を無駄にします。したがって、extract-text-webpack-plugin プラグインを使用して、CSS ファイルを独立したファイルにコンパイルします。 CDN を使用してこのファイルをノード サーバーにプッシュしたり、必要に応じてオンデマンドでロードしたりすることで、顧客リクエストのリンクを最適化し、ページの応答を高速化できます。

var path = require('path'),
 ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
 context: path.join(__dirname, 'src'),
 entry: './',
 module: {
 rules: [{
  test: /\.css$/,
  include: [
  path.join(__dirname, 'src')
  ],
  use: ExtractTextPlugin.extract({
  fallback: 'style',
  use: 'css'
  })
 }]
 },
 output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].bundle.[hash].js'
 },
 plugins: [
 new ExtractTextPlugin('[name].css')
 ]
}

上記のコードでは、extract-text-webpack-plugin プラグインを使用して src ディレクトリ内のすべての CSS ファイルを処理します。まず、css-loader プラグインを使用して CSS コードを解析します。解析が失敗した場合は、style-loader プラグインを使用して解析し、最終的に dist ディレクトリに対応する js ファイルを生成します

古いブラウザと互換性があります

以前はスタイルを作成するときに、一部のスタイルに異なるプレフィックスが必要でした。さまざまなブラウザの場合 (-webkit- など)。ビルド ツールを入手したので、これらのプレフィックスに注意を払う必要はなくなりました。ビルド ツールはこれらのプレフィックスを自動的に追加します。

webpack の場合、これらのことを行うにはローダーまたはプラグインを使用する必要があると考えられます。確認したところ、autoprefixer-loader は廃止され、現在はメンテナンスされていないことがわかりました。posscss

postcss を使用することをお勧めします。 js 内の CSS スタイルを変換するために使用される js プラグインは他のプラグインと併用する必要があります。これは単なるコンバーターであり、コード解析機能は提供しません。

ここでは、スタイルに接頭辞を追加するための自動接頭辞プラグインが必要です。まずモジュールをダウンロードします。

npm install -D autoprefixer

その後、Webpackを設定できます

var autoprefixer = require('autoprefixer')
module.exports = {
 ...
 module: {
 loaders: [
  ...
  {
  {
   test: /\.css$/,
   loader: ExtractTextPlugin.extract(["css", "postcss"])
  },
  }
 ]
 },
 postcss: [autoprefixer()],
 ...
}

抽出されたスタイルファイルを見ると、プレフィックスが追加されていることがわかります

a {
 display: flex;
}
/*compiles to:*/
a {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex
}

さらに、autoprefixerは、次のような異なるバージョンを生成することもできますターゲット ブラウザのバージョン プレフィックスの数 たとえば、アプリケーションのほとんどのユーザーが比較的新しいバージョンのブラウザを使用している場合は、次のように設定できます。

postcss: [autoprefixer({ ブラウザ: ['最後の 2 バージョン'] })] 生成されるスタイルは少し異なるか、上記の例になります

a {
 display: flex;
}
/*compiles to:*/
a {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

スタイル圧縮

コードを圧縮しますこれを行うには、webpack の組み込みプラグイン UglifyJsPlugin を使用できます。これは、js コードと css コードの両方を圧縮できます。

plugins: [
 ...
 new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false
 }
 }),
 ...
]

実際には、CSSコードを圧縮しているとは言えません。本質的には、JSコードを圧縮してから、そのコードをCSSファイルに出力しています。

共通コードを抽出するには CommonsChunkPlugin を使用します

まず第一に、CommonsChunkPlugin は複数のエントリがある場合に使用されることを明確にする必要があります。つまり、複数のエントリ ファイルがある場合、これらのエントリ ファイルにはいくつかの共通コードが含まれる可能性があり、これらの共通コードは別のファイルに抽出されます。これを理解することは非常に重要です。 (何かを理解するのに長い時間がかかりました、うう~~~~)

複数のエントリで同じ css ファイルが必要な場合は、CommonsChunkPlugin を使用して、これらの共通スタイル ファイルを独立したスタイル ファイルに抽出できます。

module.exports = {
 entry: {
 "A": "./src/entry.js",
 "B": "./src/entry2.js"
 },
 ...
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons", filename: "commons.js"
 }),
 ...
 ]
}

もちろんここでは共通CSSだけが抽出されるわけではなく、共通のJSコードがあればcommons.jsにも抽出されます。 ここで興味深い現象が発生します。抽出された CSS ファイルの名前はパラメータの name の値になり、js ファイルの名前は filename の値になります。

CommonsChunkPlugin は、すべてのチャンクに共通するモジュールのみを抽出するようです

// entry1.js
var style1 = require('./style/myStyle.css')
var style2 = require('./style/style.css')

// entry2.js
require("./style/myStyle.css")
require("./style/myStyle2.css")

// entry3.js
require("./style/myStyle2.css")

プラグインを使用すると、commons.css ファイルがまったく生成されないことがわかります。

最初の 2 つのチャンクの共通コードのみを取得する必要がある場合は、これを実行できます

module.exports = {
 entry: {
 "A": "./src/entry.js",
 "B": "./src/entry2.js",
 "C": "./src/entry3.js"
 },
 ...
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons", filename: "commons.js", chunks: ['A', 'B']
 }),
 ...
 ]
}

関連する推奨事項:

webpackの外部の使用方法

webpackを使用してリソースのメソッドとテクニックを最適化する方法

webpackのパフォーマンスの最適化

以上がWebpack のスタイル処理の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。