webpackでテンプレートに関するライブラリを1つのCSSファイルにビルドする方法の紹介です。

webpackでjavascriptライブラリを1つのファイルにバンドル化することは手軽ですが、
Webサイトのテンプレートをバンドル化するなら話しは変わってきます。

""
各種スタイルシートファイルのインポート
バンドルファイルで読み込んだSASSやLESSファイルを CSSへ変換 」
フォントや画像等の外部ファイルの参照の解決 ( スタイルシート内での url関数 )
CSSファイルへ発行
""

上記4つに関するプラグインの追加や ルールの定義をする必要があります。

っということで、webpackを使って BootstrapやFont-awesome等のライブラリを使って
デザインに関するスタイルシートを1ファイルに統合してみました。
( * webpackは 2.4.1を使いました )
 

今回すること

""
・1ファイルで読み込めるようにするため、複数のスタイルシートを1ファイルに統合

・途中スタイルシートにLESSやSASS、Stylusファイルが混ざっていてもCSSにコンパイル

・テンプレート用のCSS, Javascriptファイルを圧縮

・アセットファイル( jpeg, png, ttf .. ) も所定のフォルダに格納 ( node_modulesファルダを想定 )
""

* 完成イメージ 


依存関係のインストール

webpackでビルドをする為、
各種依存パッケージをターミナル上から'npm'コマンドを使ってインストールします。
( * 事前にnode.jsの導入、プロジェクトルート上で' npm init ' がされている必要があります )

# npmを使ってインストールする場合 
npm i webpack --save-dev # webpack本体 *執筆時 v2.4.1
npm i extract-text-webpack-plugin --save-dev # textをファイルにするwebpackプラグイン
npm i css-loader --save-dev # cssを読み込むwebpack用プラグイン
npm i file-loader --save-dev # ファイルを読み込むwebpack用プラグイン
# sass関連
npm i sass-loader --save-dev # sassを読み込むwebpack用のプラグイン
npm i node-sass --save-dev # node.js用のsassプラグイン
# less関連
npm i less-loader --save-dev # lessを読み込むwebpack用プラグイン
npm i less --save-dev # node.js用のless本体
# stylus関連
npm i stylus --save-dev # stylus本体
npm i stylus-loader --save-dev # stylusを読み込むwebpack用プラグイン

# npmで一度に導入用
npm i webpack extract-text-webpack-plugin less css-loader file-loader sass-loader less-loader node-sass stylus stylus-loader --save-dev 
# yarn用
yarn add webpack extract-text-webpack-plugin less css-loader file-loader sass-loader less-loader node-sass stylus stylus-loader --dev

 

テンプレート用ライブラリの準備 & バンドルファイルの作成

まずはテンプレート用のライブラリの準備です。
( * 既にお揃いの場合は飛ばしても問題ありません  )

npmを使って " bootstrap ", " font-awesome ", " sweet-alert " をインストールしました。

# 各種ライブラリのインストール
npm i bootstrap font-awesome sweetalert --save


続いて webpackで各種ライブラリを1つにまとめる為、バンドル用のjsファイルの作成です。

テンプレートのビルド用にtplフォルダを作成し、スタイルシート専用のバンドル 、
ライブラリに依存したjs専用の2つのバンドルファイルを作成しました。

// tpl/bundle-css.js * スタイルシート用のバンドル
require('font-awesome/css/font-awesome.min.css')
require('bootstrap/dist/css/bootstrap.min.css')
require('sweetalert/dist/sweetalert.css')
require('sweetalert/themes/twitter/twitter.scss')
/* bowerから導入したライブラリを読み込む場合 */
// require('../bower_components/animate.css/animate.min.css')
/* パスが正しければ ファイルがどの場所でも問題ありません */
// require('./style/test.less')
// tpl/bundle.js *js用のバンドル
require('bootstrap/dist/js/bootstrap.min')
require('sweetalert/dist/sweetalert.min')

 

設定ファイル ( config ) の作成

続いてwebpack用のコンフィグファイルの作成です。

特に重要となるプラグインが " extract-text-webpack-plugin "で、
' rules 'オブジェクト内で各種スタイルシートの振る舞い、
' plugins '内ではバンドルファイル内で読み込んだモジュールを所定の場所に発行、
発行したCSS & JSファイルを圧縮する指定をしています。

* フォルダ構造

webpackはビルドの時に ' --config ' オプションを渡すことで、設定ファイル指定できるので
プロジェクトルートに ' tpl.conig.js ' というテンプレート専用のコンフィグファイルを作成しました。
( * デフォルトは ' webpack.config.js ' )

// tpl.config.js
const webpack = require("webpack");
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    // tpl.css tpl.jsファイルとして発行
    tpl: [
      "./tpl/bundle-css.js", // スタイルシート用のバンドルファイル
      "./tpl/bundle.js" // スタイルシートに依存しているjsのバンドル
    ]
  },
  output: {
    // 発行先 * public/templateフォルダに発行
    path: path.resolve(__dirname, "public/template"),
    filename: "[name].js"
  },
  module: {
    // 各種ファイルの振る舞い
    rules: [
      {
        // CSSファイル用の処理
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          // fallback: "style-loader",
          use: ["css-loader"]
        })
      },
      {
        // SASSファイル用の処理
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
          use: ["css-loader", "sass-loader"]
        })
      },
      {
        // LESSファイル用の処理
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          use: ["css-loader", "less-loader"]
        })
      },
      {
        // Stylusファイル用の処理
        test: /\.styl/,
        use: ExtractTextPlugin.extract({
          use: ["css-loader", "stylus-loader"]
        })
      },
      {
        // スタイルシート以外のファイルの処理
        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]"
        }
      }
    ] // ! rules
  }, // ! module
  externals: {
    // jQueryは外部から読み込むことを想定しています
    jquery: "jQuery"
  },
  plugins: [
    // 発行するCSSファイル名
    new ExtractTextPlugin("[name].css"),
    // jsファイルを圧縮
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    // CSSファイルを圧縮
    new webpack.LoaderOptionsPlugin({ minimize: true })
  ]
};

 

使い方 & ビルドコマンド化 

バンドルファイルとコンフィグファイルの作成が済めば 下記のコマンドでビルドが可能です。

# webpackを起動
./node_modules/.bin/webpack --config tpl.config.js


ビルドが完了すれば ' public/template ' 内に
' tpl.css ' ' tpl.js ' + それに依存している紐付いている*アセットファイルが作成されます。
( * styleシートのurl()で読み込んでいるファイル )

上記のままでも問題なく起動出来ますが、' package.json ' 内にコマンドとして登録すれば、
より使い勝手が良くなります。(  * ' npm run tpl ' でビルド可能 )
(  * scripts内に "tpl": "./node_modules/.bin/webpack --config tpl.config.js" を追加しました)

{
  "name": "webpacksample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "tpl": "./node_modules/.bin/webpack --config tpl.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "webpack": "^2.4.1"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "font-awesome": "^4.7.0",
    "sweetalert": "^1.1.3"
  }
}


実際に上記の内容でビルドをしたデモビデオ ( ビデオでは検証の為、上記以外のこともしています )

 

Summary

以上が webpackでスタイルシートのビルドをする説明でした。

webpackにはビルド時に スタイルシート内のurl関数で読み込んでいるファイルを
ハッシュ化して展開する' url-loader 'というプラグインも用意されていますが、
' background-image ' で読み込んでいる画像のサイズを考えて' file-loader 'を使いました。

初期設定が少々複雑な気もしますが、
一度コンフィグファイル & バンドルファイルを作ってしまえば 後はビルドするだけなので、
テンプレート用のライブラリを1つのCSSにビルドをしたい人は ぜひ×2参考にしてください!

GitHub : webpack-contrib/extract-text-webpack-plugin

 

この記事のカテゴリ

プログラミング

この記事のタグ

開発ツール , Webデザイン , 効率化

Socialシェアボタン

スポンサーリンク