今回は、 webpackでnormalize.cssを読み込む方法を紹介します。
webpackとはなんぞやや normalize.cssとはなんぞやということは他のサイト の説明に譲るとして、 この記事ではとりあえず、 normalize.cssを 読み込むというところを第一目標にして書いていきます。
早速環境準備 - WebPack,CSSLoarder,StyleLoaderをインストール
サンプル用のプロジェクトを作成 + webpackとstyle-loader、css-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>
以上です。