webpackはcss以下のファイルをパックします

1はじめに

Webpackは、css、less、imagesなどのリソースを直接処理できないため、対応するリソースを使用する必要がありますloader。ローダーの紹介については、このブログWebpackでローダーを確認してください。

2.cssファイルをパッケージ化します

ディレクトリ構造（この場合のデモコードには、ページの下部にダウンロードリンクがあります）
ここに画像の説明を挿入
（1）プロジェクト開発プロセス中に、多くのスタイルを追加する必要があり、スタイルを別のファイルに書き込むことがよくあります。srcディレクトリに、normal.cssファイルを作成するcssフォルダーを作成します。

body {
    
    
  /*normal.css中的代码非常简单，就是将body设置为blue*/
  background-color: blue;
}

ただし、normal.cssのスタイルはこの時点で有効になりますか？

しない。引用しなかったからです。
エントリが1つしかないため、webpackがそれを見つけることは不可能であり、webpackはエントリから他の依存ファイルの検索を開始します。

パッケージ化する場合、パッケージエントリファイルが依存するファイルのみがパッケージ化されます。依存ファイルが他のファイルに依存している場合、webpackはそれを自動的に処理します。cssファイルなどの新しいファイルが作成されたが、他のファイルが新しく作成されたファイルに依存していない場合、このファイルはパッケージ化されません。

（2）次に、normal.cssファイルをmian.jsエントリファイルにインポートします。

// 依赖css文件，css文件也可以被当做一个模块来处理。
// 由于我们只要依赖css文件就可以了，并不需要用一个变量来接收
require('./css/normal.css')

再パッケージすると、エラーが報告されたことがわかり、適切なローダーをインストールするように求められました。

ここに画像の説明を挿入
（3）webpackの公式ウェブサイトhttps://www.webpackjs.com/loaders/css-loader/を確認し、コマンドをインストールcss-loaderしてstyle-loader使用する必要があることを確認しましたnpm install --save-dev xxx（xxxは対応するローダーの名前に置き換えられます）

次にwebpack.config.js、いくつかの構成ファイルを作成する必要があります

let path = require('path');

module.exports = {
    
    
  entry: './src/main.js',              //打包入口
  output: {
    
                                //出口
    path: path.join(__dirname,'dist'),
    filename: 'bundle.js'
  },
  module:{
    
    
    rules:[
      {
    
    
        test:/\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中，要放在css-loader的前面
        // webpack在使用多个loader时，是按照从右向左（或者说从下到上）的顺序使用
        use:['style-loader','css-loader']
      }
    ]
  }
}

次に、再パッケージ化して、パッケージが成功したことを確認します。distフォルダーに追加のbundle.jsファイルがあります。このbundle.jsファイルをhtmlファイルに導入するだけで済みます。

3.少ないファイルをパックします

（1）最初にspecial.lessファイルを作成し、それをcssフォルダーに置きます

@fontSize:50px;
@fontColor:orange;

body {
    
    
  font-size:@fontSize;
  color: @fontColor;
}

（2）エントリファイルmain.jsファイルで紹介します

require('./css/special.less')

（3）公式ウェブサイトhttps://www.webpackjs.com/loaders/less-loader/を参照してlessファイルをパックし、対応するローダーをインストールします。less-loader

npm install --save-dev less-loader less

（4）webpack.config.js構成ファイルを変更し、対応するless-loaderの構成を追加します

module:{
    
    
    rules:[
      {
    
    
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
    
    
        test: /\.less$/,
        use: [{
    
    
          loader: "style-loader" // creates style nodes from JS strings
        }, {
    
    
          loader: "css-loader" // translates CSS into CommonJS
        }, {
    
    
          loader: "less-loader" // compiles Less to CSS
        }]
      }
    ]
  }

4.情報

このブログのデモコードダウンロードリンクはhttps://webchang.lanzous.com/i6bFtkflaefです。パスワード：2h4i
webpack中文所属ローダー
ブログwebpackでのローダーの紹介
ヒント：webpackのローダーを使用すると、バージョンの問題が発生する可能性があります。このブログに注意してください。https：//blog.csdn.net/weixin_43974265/article/details/112667927