middleman4とwebpack

#middleman4のディレクトリにwebpackとcliをインストールする
```
npm init
npm install --save-dev webpack webpack-cli
```

#package.jsonの編集

```
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
```
この部分に以下のように2行追記する

```
"scripts": {
  "develop": "webpack --config ./webpack.config.js --watch -d --progress --colors",
  "build": "webpack --config ./webpack.config.js --bail -p",
  "test": "echo \"Error: no test specified\" && exit 1"
},
```
#config.rbの編集
以下のコードを好きなところに追記する

```
activate :external_pipeline, {
  name: :webpack,
  command: build? ?
    "NODE_ENV=production npm run build" :
    "NODE_ENV=develop npm run develop",
  source: "./build",
  latency: 1
}
```
#webpack.config.jsの作成と編集
config.rbと同じ階層にwebpack.config.jsを作成

```
const webpack = require('webpack');

module.exports = {
  entry: [
    './source/javascripts/site.js'
  ],
  output: {
    filename: 'site.js',
    path: __dirname + '/build/javascripts'
  }
};
```
```
vi webpack.config.js
上記をコピペ
:wq
```

#gitignoreの編集
以下を追記し監視から除外する

```
node_modules/
```

# 動作確認

bundle exec middleman
で起動してみる

```
== The Middleman is loading
== Executing: `NODE_ENV=develop npm run develop`
== External: > template@1.0.0 develop /Users/***/Sites/mysites/***
== External: > webpack --config ./webpack.config.js --watch -d --progress --colors
10% building 1/1 modules 0 active
webpack is watching the files…

== External: Hash: a0a5f17ceb65673f14d8
== External: Version: webpack 4.39.1
== External: Time: 76ms
== External: Built at: 2019/08/08 17:11:39
== External:     Asset      Size  Chunks             Chunk Names
== External: bundle.js  4.63 KiB    main  [emitted]  main
== External: Entrypoint main = bundle.js
== External: [0] multi ./source/javascripts/site.js 28 bytes {main} [built]
== External: [./source/javascripts/site.js] 55 bytes {main} [built]
== View your site at "http://localhost:4567", "http://127.0.0.1:4567"
== Inspect your site configuration at "http://localhost:4567/__middleman", "http://127.0.0.1:4567/__middleman"
```
こんなんが出ればOK

# JSファイルをバンドルする
views.jsというファイルをエントリーポイントに指定したJSにバンドルする例

```javascript:views.js
console.log('hoge');
```
以下を記述

```javascript:***.js
import views from './views'
```

以下のコマンドを叩く

```
webpack
```

```
Hash: 9bbc245da56ed4feec28
Version: webpack 4.39.2
Time: 65ms
Built at: 2019/08/20 15:46:21
  Asset      Size  Chunks             Chunk Names
site.js  4.97 KiB    main  [emitted]  main
Entrypoint main = site.js
[0] multi ./source/javascripts/***.js 28 bytes {main} [built]
[./source/javascripts/***.js] 60 bytes {main} [built]
[./source/javascripts/views.js] 24 bytes {main} [built]
```


# JSにCSSをバンドルする
SASS(SCSS)を使っている場合です。
まず、必要なパッケージをインストールします。

```
npm install --save-dev style-loader css-loader sass-loader node-sass
```
任意のスタイルファイルを用意する
例題はstylesheetsディレクトリ内にsite.css.scssというファイルを用意してます。

## webpack.config.jsの編集

```javascript:webpack.config.js
const webpack = require('webpack');

module.exports = {
  mode: 'production', //追記
  entry: [
    './source/javascripts/site.js'
  ],
  output: {
    filename: 'site.js',
    path: __dirname + '/build/javascripts'
  },
  module: { //ここから追記
    rules: [
      {
        test: /\.(sc|c|sa)ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
    ],
  },
};
```

## site.jsの編集

```javascript:site.js
import "../stylesheets/site.css.scss"; //追記
import views from './views'

```

## layout等のHAMLの編集
CSSの読み込み行を削除し、JS読み込み行を閉じBODY直上に移動させてます。

```erb:layout.erb
<!doctype html>
<html lang='ja'>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='x-ua-compatible' content='ie=edge'>
    <meta name='viewport'
          content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <title><%= current_page.data.title || "Middleman" %></title>
  </head>
  <body>
    <%= yield %>
    <%= javascript_include_tag 'site' %>
  </body>
</html>
```

## CSS内の画像をバンドルする
```
npm install --save-dev url-loader
```
### webpack.config.jsの編集
```javascript:webpack.config.js
const MODE = 'development';
const webpack = require('webpack');
const enabledSourceMap = MODE === "development";

module.exports = {
  mode: MODE,
  entry: [
    './source/javascripts/site.js'
  ],
  output: {
    filename: 'site.js',
    path: __dirname + '/build/javascripts'
  },
  module: {
    rules: [
      {
        test: /\.(sc|c|sa)ss$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              url: true,
              sourceMap: enabledSourceMap,
              importLoaders: 2
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: enabledSourceMap
            }
          }
        ]
      },
      {
        test: /\.(gif|png|jpg|eot|wof|woff|woff2|ttf|svg)$/,
        loader: "url-loader"
      }
    ]
  },
};
```

## 【おまけ】JQueryをnpmで管理する
dependenciesでもdevDependencies好きな方どうぞ

```
npm install --save-dev jquery
```

jqueryを動作させたいJSファイルに以下を記述

```
const $ = require('jquey');
```

#環境
ruby 2.6.5p114
npm 6.13.6
middleman 4.3.5