（B）のCSSを追加し、構築するための開発環境からIMG 0モジュラーサポートのWebPACK

シンプルwebpack.config.jsで webpack.config.jsファイルの基盤を構築するが、唯一のパックJSモジュールをサポートします。

CSSとIMGためのモジュールのサポートを追加するには、このブログのエントリ

まず、次の3つのローダインストールする必要がCSS-ローダー、スタイル・ローダー、ファイル・ローダーを

yarn add css-loader style-loader

cssファイルを解析するためのCSS -ローダー、スタイル・ローダーがするCSSスタイルを解決しますstyleラベルの形でHTMLファイルに挿入されます

インストールしたら、あなたはwebpack.config.js構成モジュールを変更する必要があり、

前回のWebPACKに基づいて設定ファイルでは、スタイル・ローダーは、CSS-ローダーの前に必要な新しいモジュールのプロパティを追加、

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

ルール属性が要求に一致しているルール（規則）配列を、それぞれ配列ルールオブジェクトは、モジュールの特定のタイプを一致させるために使用することができます。

規則マッチングのCSSモジュールと、2つのプロパティ含ま試験及び使用を、
試験は、典型的には、ファイルを解析するモジュールをマッチングさせるための正規表現であり、アレイは、一般的にどのローダーを指定するために使用される使用され得るそれぞれが文字列またはオブジェクト

use:[
    'style-loader'
]
// 等同于
use: [
    {
        loader: 'style-loader'
    }
]

ここでは、また、CSSプロパティにプレフィックスを追加するpostcssローダブラウザプラグインを使用することができます

インストールプロファイルと依存性が完了した後、SRCのあるstyle.cssに新しいディレクトリ

.red{
  color: red;
}

CSSファイルindex.jsファイルの紹介しながら、

import _ from 'lodash'
import './style.css'

function createComponent(tag) {
  let element = document.createElement(tag)

  element.innerHTML = _.join(['Hello', 'webpack'], ', ')
  
  element.classList.add('red')

  return element
}

document.body.append(createComponent('div'))

梱包指示を行った後で、distディレクトリにindex.htmlファイルを開くのstyle.cssスタイルの内側にあるheadタグ内のスタイルタグよりもしばらく、テキストの色が既に赤で表示されます

同じ絵は、構成ファイル内の一致する画像ファイルを追加し、リソースファイルローダーによって処理することができます

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|png|bmp)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[ext]'
            }
          }
        ]
      }
    ]
  }

DIST / IMGディレクトリにoptions.nameプロパティパッケージ化画像ファイルによって、このRule.useルールで、[名前]。[EXT]プレースホルダ、その結果、元のファイル名と拡張子を使用してパッケージファイル、
インデックスの後.jsファイルは、画像を紹介しました

import _ from 'lodash'
import './style.css'
import ImgFile from './asset/tim.jpg'

function createComponent(tag) {
  let element = document.createElement(tag)

  element.innerHTML = _.join(['Hello', 'webpack'], ', ')
  element.classList.add('red')

  let img = new Image()
  img.src = ImgFile

  element.append(img)

  return element
}

document.body.append(createComponent('div'))

その後、パック命令を実行する、あなたは私たちが絵に導入されたものですフォルダを、のimgより次のdistのディレクトリが表示されます。あなたは絵が表示されますindex.htmlをオープン

これまでのところ、それはCSSとIMGの導入を完了しました。しかし、スタイルタグの形で現在のスタイルファイルをHTMLに挿入します。

しかし、私たちが望むCSSファイルが引っ張られ、別のCSSファイルのうち、
ここでは公式にはお勧め使用して、あなたはプラグインが必要になりますMiniCssExtractPluginの 、追加のインストールを必要とするプラグインを
前回の記事では、index.htmlには、手動で作成されます使用することができますどこHtmlWebpackPlugin のWebPACKが自動的に、そこにチェーンCSSとHTMLスクリプトを追加する一方、自動的に私たちは、自動的に、htmlファイルを作成し
、手動でのCSSやJSファイルを導入する必要はありませんので。

二つのプラグインのインストールyarn add mini-css-extract-plugin html-webpack-plugin、

インストールには、2つのプラグconfigファイルの頂部に導入される必要があり、その後、新しい方法によって、アレイ状に配置された文書のプロパティ配列、にプラグインを追加した後
MIniCssExtractPluginを提供する前に交換用のスタイル・ローダーにローダーにしながら、

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
 ...
  module: {
    ...
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,  // 将'style-loader'替换成MIniCssExtractPlugin.loader
          'css-loader'
        ]
      },
    ...
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    })
  ]
}

各パックには、手動で古いファイルを削除する必要がないようにCleanWebpackPluginプラグdistのフォルダを空にする必要もあり、

const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 新的CleanWebpackPlugin 引入方式，旧的已不可用

distのフォルダを除去した後、パッケージを実行し、あなたは、自動的に作成されたindex.htmlファイルを新しいパッケージ化されたファイルが表示されます

webpack.config.jsファイルを完了

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  entry: {
    app: path.resolve(__dirname, './src/index.js')
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|png|bmp)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    }),
    new CleanWebpackPlugin()
  ]
}

（B）のCSSを追加し、構築するための開発環境からIMG 0モジュラーサポートのWebPACK

おすすめ