地に足をつけずに世界を生き抜くブログ

webpack, ちょっとだけ理解した

webpackを学ぶ

勉強している教本の通りにやってみてもうまくいかず、なにが問題なのかわからなかったのでひとまず公式ドキュメント通りにやってみる。
英語ですが、そのへんのQiita記事よりわかりやすいです。ひとまずやってみればできました。出来たという実績だけでも自信がついた。

https://webpack.js.org/guides/getting-started/

STEP 1 Setup webpack

作業用のディレクトリを作成して、webpackをインストールします。

#作業ディレクトリを作成
mkdir webpack-demo
cd webpack-demo
npm init -y
#webpackをインストール
npm install webpack --save-dev
npm install webpack-cli --save-dev

ディレクトリの構成はこんな感じ

package.jsonが作成されるので、ここにindex.html, srcディレクトリ、その中にindex.jsを作成します。

wepack-demo
┣ package.json
┣index.html
┣/src
    ┣index.js
STEP 2 設定を書く

webpack.config.json

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname,'dist')
    }
};

index.jsをmain.jsに出力させるように設定を書きます。出力先フォルダとしてdistを作成し、先ほど作成したindex.htmlをこちらに移動します。

そしてコンパイルします

npx webpack --config webpack.config.js

Built at: 2019-07-29 12:12:36 PM
  Asset      Size  Chunks             Chunk Names
main.js  70.5 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 228 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

これが出たら成功です。

コメントは受け付けていません。