webpack4の基礎

ついに webapck4.0.0がリリースされましたね！

f:id:top_men:20180227025935p:plain

変更点としてよく言われているのが設定ファイルが不要ということです。

この記事では主要な変更点に絞って実際に手を動かしながらwebpack4の特徴を掴んでいくことを目的とします。

では早速、開発用のディレクトリを作成します。

mkdir webpack4_practice

npm init -y

package.jsonファイルが作られます。

ではではwebpack4.0.0をインストールしましょう！

npm i -D webpack

webpackみたいにコマンドを実行している場合はcliを入れる必要があります。webpack-cliをインストールしましょう。

npm i webpack-cli -D

インストールができたらpackage.jsonを開き、以下の記述を追加します。

"scripts": {
  "build": "webpack"
}

その後以下のコマンドを実行してください！

npm run build

このようなエラー文がでると思います。 ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack4_practice'

これはどういうことかというとwebpack4が自動的に./src以下にエントリーポイントを探しにいってくれるのです。

以前のバージョンではwebpack.config.jsファイルの中でエントリーポイントと出力先を記述する必要があったと思います。

const path = require('path');

module.exports = {
  entry: {
    'index': [
      path.resolve(__dirname, 'src/index.js')
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
  },
};

ではでは実際にファイルを作成してビルドするところまでやってみましょう。

./src/index.jsとファイルを作成します。

console.log("This is the entry file")

その後先ほどpackage.jsonに記述したようにnpm run buildと実行してみてください。

新しく./dist/main.jsとファイルができていると思います。

しつこいようですがまだ設定ファイルは記述していません。

記事の頭でも言及しましたが、webpack4での新たな機能のひとつとして

設定ファイルを必要としない

と言われています。

もう少し詳しく見ていきます。

まずはじめにwebpackではProduction用とDevelopment用で2ファイル用意するのが典型的な例でした。

これは大きなプロジェクトになればなるほど必要になってきます。

ですがwebpack4ではどうでしょうか？
webpack4では

  • productionモード
  • developmentモード

というものがあります。 実際に手を動かして見ていきましょう。

package.jsonを編集します。

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

npm run devと実行後、./dist/main.jsを見てみてください。minifyされていないことが確認できると思います。

その後npm run buildと実行し、./dist/main.jsを見てみてください。minifiedされていることが確認できるかと思います。

とても簡単な例ですが、webpack4ではこのようにそれぞれ1行のコマンドでDevelopment用とProduction用とで処理を変えることができます。とっても簡単ですね♪

次にBabelを使用してES6 → ES5のトランスパイルをしていきたいと思います。

babel-loaderがwebpackのがES6からES5にトランスパイルするためのloaderなので以下のパッケージをインストールします。

  • babel-core
  • babel-loader
  • babel-preset-env

以下のコマンドを実行します。

npm i babel-core babel-loader babel-preset-env -D

その後、 .babelrcをプロジェクトフォルダ直下に作成し、以下を記述します。

{
    "presets": [
        "env"
    ]
}

ここで疑問に思うかもしれません。 設定ファイルが不要というのがwebpack4の大きな変更点として言われているにのに、結局設定ファイルが必要になるんだなーと。

最小限の構成で開発をするのであれば、今までで紹介した

  • エントリーポイント、ビルド先がデフォルトで決まっている
  • Production、Developmentモードがコマンド一つで切り替え可能

上記のことから設定ファイルが必要がないということが言えるのではないのでしょうか？ 自分独自の開発環境を構築しようとなった時には、設定ファイルが必要になってくると思います。(実際に触ったばかりなのでまだ確定できませんが。。。)

このことを踏まえてwebpack.config.jsファイルをプロジェクトフォルダ直下に作成します。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

ここで見て欲しいのが、エントリーポイントを記述していない点です。

その後、./src/index.jsをES6で記述します。

const data = [1, 2, 3];
const getArrData = () => console.log(...data);
console.log(getArrData)

npm run buildと実行してみください。 正しくES6 → ES5にトランスパイルされたかと思います。

最小限の構成ですとこのように設定ファイルなしで開発していくことができます。

次回はReact+webpack4での開発環境を紹介できればと思います。