ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

webpackでSemantic UIの jsを使う

Semantic UIでCSSは、linkタグを使ってインクルードしている場合、semantic.jsだけをwebpackしたい場合がある。

Semantic UIのjsはjQueryも必要になるので、webpackにjQueryも含める必要がある。

jQueryはnpmで取り込んでrequire経由で呼び出せば問題はない。

semantic.js(正確にはsemantic.min.jsなのだが)は、zipファイルをダウンロードして解答するかgit cloneしたファイルを使ってrequire関数を使えば解決できる。

//main.js
var $ = require('jquery');

$(function() {
  window.jQuery = $;
  require("lib/semantic.min");


  $('.ui.radio.checkbox').checkbox({
  });

  $('select.dropdown').dropdown({
  });
});

webpack.config.jsの設定を行う


//webpack.config.js
const path = require('path');
module.exports = {
  mode: 'production',
  entry: './app.1.0.0.js',
  output: {
    path: './',
    filename: 'app.1.0.0.min.js'
  },
  resolve: {
    alias: {
      lib: path.resolve(__dirname, 'lib/')
    }
  }
}

最後に、ターミナルで、npx webpack --config webpack.config.jsコマンドを叩けば、semantic.min.jsがインクルードされている状態でjsを生成することができる。