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