Ionic1.x系のプロジェクトをWebpack2.2で今風に

ご挨拶

初めての投稿です。お手柔らかに激しいご指導ご鞭撻お願いします。
Ionic1.1フレームワークで作られたアプリの保守を開始して、半年が過ぎました。
開発期間を含めると約1年お付き合いしているアプリです。

初めてのハイブリッドアプリでとても良い経験を積めたのですが・・・

なんかもう古い（笑）

やりたかったこと

こんなふうな環境でゼロベースから作り直したいな～な私的理想環境を構築。

現環境

• jshintで静的解析
• grunt dgeniでドキュメント管理
• 型チェックなにそれ？
• www/src以下のソースコードを直接編集
• es6?????

結果

yosshitaku067/ionic-webpack-es6-starter

webpack.config.jsはこんな感じ

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
const webpack = require("webpack");

module.exports = {
  entry: './src/app/app.js',
  output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'www/src')
  },
  module: {
    rules: [{
        test: /\.js$/,
        exclude: '/node_modules/',
        loader: 'babel-loader'
      },
      { // regular css files
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          loader: 'css-loader?importLoaders=1',
        }),
      },
      { // sass / scss loader for webpack
        test: /\.(sass|scss)$/,
        loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
      }, {
        test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file-loader?name=fonts/[name].[ext]'
      }, {
        test: /\.html$/,
        loader: 'html-loader'
      }, {
        test: /\.(png|jpg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000
          } // Convert images < 10k to base64 strings
        }]
      }
    ]
  },
  devtool: 'source-map',
  plugins: [
    new ExtractTextPlugin({
      filename: 'style.bundle.css',
      disable: false,
      allChunks: true
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]
};

使い方

npm install
npm run start

ポイント

• FlowTypeを試験的につかってみたところ。
• ESLint

感想

Webpackについて調査すると、日本語の情報は1.xについてが多い。
結局は公式ページとにらめっこになりました。
振り返るとなにも大変なことはやっていないんですけどね。

まあ素直にIonic2に移行できればいいんですが、
そんなわけにもいかないので気分だけでも味わいました。

できていないこと

コメントからのドキュメント管理。
今更gruntやgulpを使いたくはないな～。
なんか新しい方法ないかな～。