St_Hakky’s blog

プログラミング/心理学/人事/留学/データサイエンス/機械学習/Deep Learning/バイオインフォマティクス/日頃思ったこと/人事のデータサイエンスしてみたい

Webpackを使う関係で勉強しましたのでまとめる[随時更新]

こんにちは。

Webpackをガリガリ使うようなプロジェクトにかかわる事になったので、勉強しました。そのメモです。

〇環境

  • Centos7, 64bit

〇本家のサイト

正直、こういうの勉強するときに英語さえ読めれば本家のサイトをめんどくさいけど読んだ方が最終的には早いような気がしている(笑)。

以下のサイトがたぶん一番最初に読むとよさげなものとして本系のサイトでも紹介されていた。わかりやすかったけど、僕は最初日本語の記事をとりあえず20本くらい流し読みしていたので、それもあるのかもしれない笑。

〇Webpackとは

僕なんかが改めて説明する必要がないくらいにはいろんなサイトで先人たちが圧倒的解説を繰り広げているので、そちらを参照されたし(逃げ)。

〇Basic Setup

とりあえず適当な開発環境のディレクトリ下で以下のコマンドをうちます。

mkdir some-development-dir
cd some-development-dir
npm init -y
npm install --save-dev webpack

グローバルでwebpackをインストールしたい時は以下のコマンドを入力します。

npm install -g webpack


プロジェクトのルートディレクトリから、以下のコマンドを打ち込むことで、bundle.jsファイルを作ることができます。

./node_modules/.bin/webpack src/index.js dist/bundle.js

〇Configuration file

大体のプロジェクトでは少し複雑になりますし、これを設定ファイルとして効率的にしておきたいです。これを実現するのがconfiguration fileです。

これを実現するために、プロジェクトのルートに、webpack.config.jsファイルを作成します。例えば以下のような感じ。この例は本家のこちらのサイトから引用した。

const path = require('path');

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

これについては参考文献の方に詳しい説明があるので、そちらを参照されたし。

〇NPM Scripts

たぶん、全人類が「そんなローカルのwebpackのコマンドを毎回ブチ込みたくない」という気持ちでいっぱいだと思います。これは、簡単に実行できるようにすることができます。

まず、package.jsonファイルを以下のようにいじります。

{
  ...
  "scripts": {
    "webpack-build": "webpack"
  },
  ...
}

こうすると、以下のコマンドを入れることによって、前に実行していた長いwebpackのコマンドを実行することができるようになります。

npm run webpack-build

また何かあれば追記します。それでは。