Webpack はスタイルをどのように処理すべきでしょうか?

この記事では主に 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 プラグインを使用して解析し、最後に対応する js ファイルを dist ディレクトリに生成します

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

以前、スタイルを作成したとき、一部のスタイルには異なるプレフィックスが必要でした-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']
 }),
 ...
 ]
}

上記は、すべての人のために私がまとめたものです。将来、すべての人に役立つことを願っています。

関連記事:

nodeのchild_processモジュールについて(詳細なチュートリアル)

Node.jsにおける子プロセスのアプリケーションシナリオとは

nodeJsにおけるファイルシステムとフローの詳細な解釈

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