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を生成することができる。