cordova+webpack構築メモ

# はじめに
androidアプリを開発するのにCordovaを利用していて、webpackを組み合わせて構築するときのメモです。Windows10環境で構築しました。コードの構文チェックにESLint,パッケージ管理にnpm,バージョン管理にgitを利用します。

# 事前準備
* 下記をあらかじめインストールしておきます。
 - android-sdk
 - git
 - npm
 - cordova
 - eslint-cli


* プロジェクト名を決めます。
すべて小文字にするとよいです。以下test_projectとします。

#構築手順
##1.cordovaディレクトリの作成
プロジェクトを作成したいディレクトリで下記コマンドを実行
\> cordova create test_project io.cordova.test_project test_project
test_projectという名前のディレクトリとともにcordovaの各ファイルが作成されます。

##2.npm,gitの初期化
プロジェクトルート(test_projectディレクトリ)で下記コマンドを実行
\> npm init
\> git init

##3.各npmパッケージのインストール
プロジェクトルート(test_projectディレクトリ)で下記コマンドを実行
\> npm install --save-dev eslint
\> npm install --save-dev webpack webpack-cli

babelを利用するので下記もインストール
\> npm install --save-dev babel-core babel-loader babel-preset-es2015

webpack用の各種loaderもインストール
\> npm install --save-dev html-loader postcss-import postcss-loader css-loader style-loader svg-inline-loader

##4.ESLintの設定
プロジェクトルート(test_projectディレクトリ)で下記コマンドを実行
\> eslint --init

対話的に設定項目を聞かれるので、下記で設定
Use a popular style guide
Standard
JSON

##5.babelの設定
プロジェクトルート(test_projectディレクトリ)に下記ファイルを作成

```:.babelrc
{
  "presets": ["es2015"]
}
```

##6.gitignoreの設定
プロジェクトルート(test_projectディレクトリ)に下記ファイルを作成

```:.gitignore
node_modules/
hooks/
platforms/
www/js/index.js
```

##7.webpackの設定
プロジェクトルート(test_projectディレクトリ)に下記ファイルを作成

```:webpack.config.js
module.exports = {
　mode: 'development'
  entry: './www/src/entry.js',
  output: {
    path: __dirname + '/www/js',
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      },
      {
        test: /\.html$/,
        use: [
          'html-loader'
        ]
      },
      {
        test: /\.svg$/,
        use: [
          {loader: 'svg-inline-loader', options: {removeTags: true,removingTags:["sodipodi:namedview"]}}
        ]
      }
    ]
  }
};
```

##8.postcss-loaderの設定
プロジェクトルート(test_projectディレクトリ)に下記ファイルを作成

```postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
  }
}
```

##9.npm runの設定
すでに作成されているpackage.jsonのscript節を下記に編集

```package.json
(省略)
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "cordova": "cordova",
    "webpack": "webpack",
    "start": "webpack & cordova build & cordova run browser",
    "android": "webpack & cordova build & cordova run android"
  },
(省略)
```
webpackやcordovaのコマンドはnpm runを利用すると各プロジェクトローカルに保存されたものをPATHを通さなくても利用できる。

##10.ESLintの設定
すでに作成されている.eslintrc.jsonを下記に編集

```:.eslintrc.json
{
    "extends": "standard",
    "env": {"browser": true,"es6": true}
}
```
##11.cordovaのプラットフォーム追加
プロジェクトルート(test_projectディレクトリ)にて下記コマンド実行。
cordova platform add browser
cordova platform add android

##12.Content-Security-Policyの変更(不要であればスキップ)
cordovaで外部APIを叩くときにContent-Security-Policyが邪魔するときがあるので変更する。

cordovaのwwwディレクトリにあるindex.html(test_project/www/index.html)を編集

下記をコメントアウト(もしくは削除)し

```
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
```
下記を追加

```
<meta http-equiv="Content-Security-Policy" content=""/>
```

##13.srcディレクトリの作成
cordovaのwwwディレクトリ(test_project/www)で下記コマンドを実行
\> mkdir src
以後はすべてこのディレクトリ(test_project/www/src)で作業する。

##14.entry.htmlの作成
srcディレクトリにentry.htmlを作成する。

中身は自由に書く。
ここに書いたhtmlが直接bodyタグに埋めこまれる。

##15.entry.cssの作成
srcディレクトリにentry.cssを作成する。

中身は自由に書く。
npmパッケージのcssを利用するときは下記のように書く

```
@import  "..\..\node_modules\[パッケージ名]\[cssファイル名]";
```

##16.entry.jsの作成
srcディレクトリにentry.jsを作成する。
個人的なひな形は下記

```javascript:entry.js
class App{
  requireEachFiles(){
    document.body.innerHTML = require('./entry.html')
    require('./entry.css')
  }
  addEventListenerToEachElement(){
  }
  initialize () {
    this.requireEachFiles()
    this.addEventListenerToEachElement()
  }
}
document.addEventListener('DOMContentLoaded', () => {
  const app = new App()
  app.initialize()
})

```

#実行
基本的にnpmで実行する
ブラウザで実行する場合
\> npm start
androidで実行する場合
\> npm run android