webpackでnormalize.cssを読み込む方法

 

今回は、 webpacknormalize.cssを読み込む方法を紹介します。

webpackとはなんぞやや normalize.cssとはなんぞやということは他のサイト の説明に譲るとして、 この記事ではとりあえず、 normalize.cssを 読み込むというところを第一目標にして書いていきます。

早速環境準備 - WebPack,CSSLoarder,StyleLoaderをインストール

サンプル用のプロジェクトを作成 + webpackstyle-loadercss-loaderをインストール

mkdir webpack-normalize-demo
cd webpack-normalize-demo && npm init -y
npm i -D webpack style-loader css-loader

cssを読み込むにはwebpackに加えて、 style-loader、css-loaderというモジュールが必要なので、 合わせてインストールします。

 

 

インストール後 webpack.config.jsにも設定を記述します。 (webpack.config.jsは自分で作成します)

module.exports = {
  entry: `./index.js`,
  output : {
    path     : `${__dirname}/`,
    filename : 'bundle.js'
  },
  module : {
    rules : [
      {
        test: /\.css/,
        loaders: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {url: false}
          }
        ]
      },
    ]
  }
};

normalize.cssをnpmでインストール

normalize.cssもnpmでインストールできてしまうので インストールしましょう。

npm i -D normalize.css

あとは、 エントリポイントに index.js

echo "import 'normalize.css'" > index.js

と記載すれば、

normalize.cssがバンドルされた、bundle.jsができるので、 それをpublic/index.htmlなどで 読み込めば合わせて、normalize.cssも読み込めます。

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="./bundle.js"></script>
  </body>
</html>

以上です。