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

2018年1月30日

 

今回は、
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も読み込めます。
publick/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>

以上です。