webpackについて(備忘録)
htmlのheadにてlodashをcdn経由で使用するためのリンクを貼っつける
bodyでindex.jsスクリプトを使用するための記述を追加する
index.js内では、htmlのbodyに追加するdivの中身を生成して追加する
webpackを使うと、index.htmlで必要とされるデータ(画像、スクリプトなど)を、個々でサーバーに取得要求しなければならず、
時間がかかってしまうことを解決できる。
npm installした「lodash」をローカルで使うように修正。
npm installした後、index.js内にimport文を書く。
src/index.jsを、webpacjkがバンドルして、その成果物「main.js」をdist/に出力する。
なので、index.html側でmain.jsを使用できるように、body内で
main.js
を読み込んでいる。
- webpack.config.jsについて
config.jsをwebpackに使ってもらうには、exportしないといけない
npxコマンドについて
ローカルにインストールしたnpmパッケージを、「npx」と入力することで実行可能。
npxはnpmにバンドルされているため、個別のインストールは不要。
ひとまず、下記コマンドで対応した。
# 開発環境 npm run dev # 本番環境 npm run build