npmとwebpackで作るいい感じのフロントエンド開発環境(React.js使わない)、sass-loaderを使う。2016年5月の場合。shigeki.takeguchi.logshigeki.takeguchi.logアラフィフおじさんの技術日記npmとwebpackで作るいい感じのフロントエンド開発環境(React.js使わない)、sass-loaderを使う。2016年5月の場合。2016-05-31CSSJavaScriptSassnpmwebpackcss-loader、style-loader、sass-loaderを使わないでSassをnpmでコマンドからコンパイルするものがシンプルでいいなと思ってましたがwebpackのloaderを使うものも作ってみた。SassのコンパイルやらCSSをrequireしないと?と思ってたけどプラグインを使えばできた。-vまずはお決まりのNode.js入ってるか確認。-vnpm(Node.jsのパッケージマネージャー)も入ってるか確認。-vwebpackも入っているか確認。webpack-gオプションはGlobalオプションのこと。https://github.com/shigekitakeguchi/npm-webpack-sass-loader.githttps://github.com/shigekitakeguchi/npm-webpack-sass-loaderGitHubから落として使ってください。カスタマイズなりなんなりして。npm-webpack-sass落としたフォルダ内に移動する。webpack.config.jsファイル・フォルダ構成はこんな感じ。README.mdやLICENSEは開発するには不要。installこれで必要なパッケージがインストールされるはず。"MIT"}中身はこんな感じ。落としてきたpackage.jsonからインストールすればいいんですがそれぞれのパッケージの説明を。concurrentlyhttps://github.com/kimmobrunfeldt/concurrentlyconcurrentlyは複数のコマンド実行できるようにするため。具体的に何をしているかは後ほど説明。serverというのがあるみたいだけどlite-serverのがシンプルで良さそうなので使ってみた。設定ファイルは必要でした。css-loaderwebpack的な使い方であるJavaScriptファイルにCSSをロードしたりしないけどCSSを扱うなら必要らしいのでインストール。CSSを最適化(minimize)はこのパッケージの機能を利用。style-loaderこちらもCSSを扱うためにインストール。css-loaderとあわせて使うことが推奨されているみたい。sass-loaderSassのコンパイルには必要らしいのでインストール。extract-text-webpack-pluginwebpackは本来、JavaScirptのファイルの中にCSSを読みこんで使うようになっているけどこのプラグインを使うと読み込まずに使うことが可能になる(後述)。webpackhttps://github.com/webpack/webpackwebpack。何をするツールなのか説明しがたいくらい機能がある。静的なファイル(JavaScript系、CSS系、画像ファイル)の依存関係を解決するためのビルドツールってことなんだけど、ここでははJavaScriptだけを扱うようにしている。startこのコマンドでlite-serverを立ち上げwebpackでwatchを行う。webpack\""scriptsの中にあるstartがこれにあたる。webpackこれらのコマンドはそれぞれ独立したコマンドですが、最初にちょっと触れたがconcurrentlyにダブルクオーテーションでくくってスペースで区切って引数で渡せば並行して実行することになる。-w",これはwebpackのwatch(監視)を走らせている。こちらも後ほど触れるがwebpack.config.jsonで記述されたことをもとに監視している。"lite-server",lite-serverを立ち上げている。bs-config.jsonに設定ないようを記述している(こちらも後ほど触れる)。}}lite-serverの設定はドキュメントルートをappの直下にしたかったのと監視対象のファイル(html、css、js)が変更されたらリロードしてinjectChangesというBrowsersyncを動すため。]}];webpackの設定は複数のモジュール機能(この場合はJavaScriptとSass)なので以下のように配列で持たせるようになっている。[{},{}]ひとつのモジュールだとこんな感じ。オブジェクトがひとつだけでいい。{}entryにもとファイルJavaScriptは./src/scripts/app.js、CSS(Sass)は./src/scss/app.scssですね。それぞれ/app内のscriptsとstylesに出力している。JavaScriptはwebpackのUglifyJsPluginで圧縮している。CSS(Sass)の場合はExtractTextPluginで普通のCSSファイルに出力している。]},最適化(minimize)しない場合はこのように記述することでSassファイルがコンパイルされつつoutputで指定した場所とファイル名(/app/styles/style.css)で出力される。]},minimizeしたい場合はこのようにcss-loaderにminimizeオプションを引き数で渡す。webpackをはじめて数日とかという状態なので間違えや指摘をいただけると助かります。2016年5月の場合。2016年5月の場合。Disqus.渋谷の某ソーシャルゲームの会社でフロントエンドエンジニアとして働いてます。20世紀よりウェブ業界。気づいたらアラフィフ業界人です。現場で粘り強く作る側でいたいと思います。