webpackでCSS Frameworkの
Materializeを使おうとしたら、わからなかったりちょっとハマったりしたのでまとめてみました。
各バージョン
npm : 4.6.1
webpack : 2.5.0
インストール
※ npmコマンドは使える前提で話を進めます
ドキュメントのインストールについてのページから、npmの欄をみてコマンドを実行します。
$ npm install --save-dev materialize-css
$ npm install --save-dev materialize-loader url-loader file-loader
ドキュメントにurl-loaderとfile-loaderも忘れずにと書いてあるので、一緒にインストールします。
設定ファイルの作成・変更
materialize-loaderの設定
materialize-loader用にmaterialize.config.scssとmaterialize.config.jsの2つのファイルを作成します。ひとまず、設定を足すのはjsファイルの方になります。内容はドキュメントに合わせます。
$ vim materialize.config.js
module.exports = {
styles: {
'materialize': true,
}
};
スタイルの設定はとりあえずしないので、エラーにならないようにファイルだけ作成しておきます。
$ touch materialize.config.scss
webpack.config.js
つづいて、webpack.config.jsもドキュメントに合わせて変更していきます。変更箇所は、vendorとloadersの2箇所になります。
$ vim webpack.config.js
module.exports = {
...
entry: {
...
vendor: [
// /path/to/の部分に設定ファイルまでのパスを指定する
"materialize-loader!./path/to/materialize.config.js",
]
...
},
module: {
loaders: [
...
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader:"url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file"
}
...
],
},
...
}
これで完了なのですが、ドキュメント通りにやってもエラーになるという緊急事態が発生します…。
遭遇したエラー
ドキュメント通りなので安心していたらまさかのエラー発生。。
$ webpack
/var/www/html/project/src/node_modules/loader-runner/lib/loadLoader.js:35
throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
^
Error: Module '/var/www/html/project/src/node_modules/url/url.js' is not a loader (must have normal or pitch function)
at loadLoader (/var/www/html/project/src/node_modules/loader-runner/lib/loadLoader.js:35:10)
at iteratePitchingLoaders (/var/www/html/project/src/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at runLoaders (/var/www/html/project/src/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
at NormalModule.doBuild (/var/www/html/project/src/node_modules/webpack/lib/NormalModule.js:179:3)
at NormalModule.build (/var/www/html/project/src/node_modules/webpack/lib/NormalModule.js:268:15)
at Compilation.buildModule (/var/www/html/project/src/node_modules/webpack/lib/Compilation.js:146:10)
at factoryCallback (/var/www/html/project/src/node_modules/webpack/lib/Compilation.js:329:11)
at factory (/var/www/html/project/src/node_modules/webpack/lib/NormalModuleFactory.js:253:5)
at applyPluginsAsyncWaterfall (/var/www/html/project/src/node_modules/webpack/lib/NormalModuleFactory.js:99:14)
at /var/www/html/project/src/node_modules/tapable/lib/Tapable.js:204:11
at NormalModuleFactory.params.normalModuleFactory.plugin (/var/www/html/project/src/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
at NormalModuleFactory.applyPluginsAsyncWaterfall (/var/www/html/project/src/node_modules/tapable/lib/Tapable.js:208:13)
at resolver (/var/www/html/project/src/node_modules/webpack/lib/NormalModuleFactory.js:74:11)
at process.nextTick (/var/www/html/project/src/node_modules/webpack/lib/NormalModuleFactory.js:205:8)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
エラー内容を調べていると、
こんなissueを発見したのでwebpack.config.jsを下記のように変更したら、無事に解消できました！
# 変更前
loader:"url?limit=10000&mimetype=application/font-woff"
#変更後
loader:"url-loader?limit=10000&mimetype=application/font-woff"
urlをurl-loaderにしないとダメだったんですね。。
