<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>