Webpackを勉強してます！

2021.09.11 2019.11.15

Creative Member WEBチーム

突然「いままでGulp使ってたけどWebpackとBabelを導入するから」という話になったので、
最小構成で導入を行うことにしました。

WebpackとBabelを導入するにあたっての事前準備

ターミナルが扱えること
npmが使えるようになってること

ひたすら黒い画面で操作していくことになります。前提条件です。

[terminal command]

npm i -D webpack babel-core babel-loader babel-preset-es2015 gulp-babel

npm経由でwebpack導入に必要なパッケージをインストールします。
この時にBabelも一緒にインストールしました。

Webpackには設定ファイルが必要みたいなので、作成方法を確認しながら記述しました。
設定ファイルはgulpfile.jsと同じディレクトリに配置しています。

[webpack.config.js]

module.exports = {
  entry: './src/js/任意のファイル名.js',
  output: {
    filename: '任意のファイル名.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                ['es2015', {
                  'modules': false
                }]
              ]
            }
          }
        ]
      }
    ]
  }
};

Webpackは比較的早い段階で動作したのですが、ここで問題が。
Babelがまったく動きません。

Finished 'Babel'とかいってjsファイルを生成したと思われる動作をターミナルが示しているのにjsファイルをまったく生成しないので、ハマりました。

Babelとは

新しい文法でjavascriptを書いたコードを従来のコードに変換してくれるのだそうです。

[Webpackの前にBabelが動くようにすることに専念]

ハマったままでキリがないので、一旦Webpackに関する記述を全てコメントアウトしてBabelのみ動作させることに力を尽くしました。
Babelをインストールするにも種類が豊富で、全然わからないのでググって参考サイトに頼りました。
参考サイトだとpackage.jsonには以下の状態で動作する旨が載っていましたので、自分も同じようにインストールし直しました。

[package.json]

"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"gulp-babel": "^7.0.1",

インストール後、devDependenciesのブロック内にて確認。

これでBabelが無事動作しました。
babel-preset-es2015というのをアンインストール、babel-preset-envに入れ替えるにあたって、
参考サイトを読んで仕様を確認。
babel-preset-envは何もオプションを指定しなければ従来のES5という文法に全て変換するとのこと。

弊社はuglifyというのを導入しており、scriptを圧縮することでファイルサイズを一気に軽くしているのですが、 uglifyは新しい文法だと発動できずエラーになるようです。
ですので、Babelだけ動作させることに専念してた時点ではgulpfile.jsに記述しているugilfyのタスクもコメントアウトしています。

gulp.watchを起動するとファイルの変更を監視し、
新しい文法で書かれているとscriptを保存したタイミングで、予め設定している出力ディレクトリ先へ従来の書き方に変更されたjsファイルを生成します。

再びWebpack導入

コメントアウトしていたWebpackの記述を解除し、再び「Webpack+Babel」で動かせるよう作業再開しました。

新しい文法で書かれているscriptをBabelで従来の文法に変換後、js圧縮というややこしい流れを通らないといけないため、 gulpfileにuglityとBabelのタスクが別々に記述されていたのを"1つのタスク中にBabelで変換→js圧縮"の形に修正します。

[gulpfile.js]

  gulp.task('babel', function() {
    return gulp.src(['src/js/**/*.js'], {
      base: "src/js/"
    }).pipe(babel({
      presets: 'env'
    })).pipe(uglify({
      mangle: true
    })).pipe(rename({
      extname: '.min'
    })).pipe(gulp.dest('dist/js/'));
  });

出力ファイルは各自で任意のディレクトリに変更します。

この状態でようやくWebpackもエラーにならず動作したので「やった！」と思いきや、まだ問題が。

Webpackの設定を把握していない

初導入なので当然ですが、Webpackの設定がホントに初期段階なのでwebpack.config.jsを編集していくことになります。
自分が記述した場合、最終的に以下のようになりました。

module.exports = {
  mode: 'development',
  entry: './src/js/任意のファイル名.js',
  output: {
    path: `${__dirname}/dist/js/`,
    filename: '任意のファイル名.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  'env',
                  {
                    'modules': false
                  }
                ]
              ]
            }
          }
        ]
      }
    ]
  }
}

Webpackは開発用モードと本番用モードで出力を変えることができます。
例文には「development」となっていますが、これは開発用で「production」にすると本番用になります。
本番用で出力すると圧縮も一緒に行います。色々仕事してくれますね、Webpack。

「entry」はエントリーポイントといって、ここに指定したファイルを起点にして統合やら圧縮やらを行います。
エントリーポイントに指定したjsファイルにrequire文で他のjsファイルを呼び出している記述があると、
それらを自動検出して「output」で指定しておいたファイル名として統合した形で出力するのが基本になります。

初期段階ではここまでです。
複数エントリーを記述し、出し分けなどできるそうですが記述方法がいまいち把握しきれてないので、使い方を調べて要修正です。

Blogブログ