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

こんにちは。

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

〇環境

• Centos7, 64bit

〇本家のサイト

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

• webpack module bundler

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

• Getting Stared
• Core Concepts

〇Webpackとは

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

■参考文献

• Webpackってどんなもの？ - Qiita
• はじめてのWebpack - Qiita
• webpackを使った開発の効率化方法やloaderの種類をTLで話してきました【スライド付き】 | 株式会社LIG

〇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')
  }
};

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

■参考文献

• Configuration
• webpack.config.jsの読み方、書き方 - dackdive's blog

〇NPM Scripts

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

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

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

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

npm run webpack-build

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