webpack4 実験場

webpackと組み合わせて使われているツールをひとつひとつ順番に試してみた。
webpackは、最後にjsとcssをまとめることと、
webpack-dev-serverを使ってhot loadを試すところで使用。

環境

virtualbox 5.2.22
vagrant 2.2.1
ubuntu-18.04
Docker version 18.09.0, build 4d60db4
docker-compose version 1.23.1, build b02f1306

bashまとめ

コマンド	ソース	出力
bin/up.sh	src	ブラウザで確認
bin/pug/build.sh	src/templates	dist/html
bin/ts/build.sh	src/assets/js	pre-dist/assets/js
bin/elm/build.sh	src/assets/elm	pre-dist/assets/elm
bin/js/build.sh	pre-dist/assets/js, pre-dist/assets/elm	dist/assets/js
bin/scss/build.sh	src/assets/css	pre-dist/assets/css
bin/postcss/build.sh	pre-dist/assets/css	dist/assets/css
bin/webpack/build.sh	dist	app

docker

docker/docker-compose.yml

version: '3'
services:
  # ビルドツール
  webpack:
    build: ./webpack
    volumes:
      - ./config/webpack/.babelrc:/app/.babelrc
      - ./config/webpack/elm.json:/app/elm.json
      - ./config/webpack/tsconfig.json:/app/tsconfig.json
      - ./config/webpack/webpack.config.js:/app/webpack.config.js
      - ../src/:/app/src
      - ../app/public:/app/dist
      - ../bkup:/bkup
      - ../dist/html:/app/html
    environment:
      - NODE_ENV=develop
    command: [yarn, start, --config, ./webpack.config.js]
    ports:
      - 3000:3000
      - 3002:3002
  # htmlテンプレートエンジン
  pug:
    build: ./pug
    volumes:
      - ../src/templates:/app/src
      # - ../app/public:/app/dist
      - ../dist/html:/app/dist
    environment:
      - SHELL=/bin/bash
    command: [npm, run, watch]
  # デプロイツール
  firebase:
    build: ./firebase
    env_file: .env
    volumes:
      - ../app/public:/app/public
      - ../app/.firebaserc:/app/.firebaserc
      - ../app/firebase.json:/app/firebase.json
    ports:
      - 5000:5000
      - 9005:9005

docker/webpacks/Dockerfile

FROM node:11.2.0

# コンテナ上の作業ディレクトリ作成
WORKDIR /app

# 後で確認出来るようにpackage.jsonを作成
RUN npm init -y

## for js
### babel
RUN yarn add --dev @babel/core \
                  @babel/cli \
                  @babel/preset-env
RUN yarn add @babel/polyfill

### lint
RUN yarn add --dev eslint \
                   eslint-plugin-import \
                   eslint-config-airbnb-base \
                   eslint-plugin-jasmine

### esdoc
RUN yarn add --dev esdoc esdoc-standard-plugin

## for ts
RUN yarn add --dev typescript
RUN yarn add --dev tslint tslint-config-airbnb
RUN yarn add --dev typedoc 

## for css
### sass
RUN yarn add --dev node-sass

### postcss
RUN yarn add --dev postcss postcss-cli
RUN yarn add --dev autoprefixer

### lint
RUN yarn add --dev stylelint 
RUN yarn add --dev stylelint-scss
RUN yarn add --dev stylelint-order
RUN yarn add --dev stylelint-config-sass-guidelines

## elm

RUN yarn add --dev elm
RUN yarn add --dev elm-format
### elm minify
RUN yarn add --dev uglify-js
RUN npm i -g uglify-js

## webpackインストール
RUN yarn add --dev webpack
RUN yarn add --dev webpack-cli
RUN yarn add --dev webpack-merge
RUN yarn add --dev webpack-dev-server

## plugin
RUN yarn add --dev mini-css-extract-plugin
RUN yarn add --dev html-minifier-webpack-plugin
RUN yarn add --dev clean-webpack-plugin
RUN yarn add --dev copy-webpack-plugin

### loaders
RUN yarn add --dev babel-loader
RUN yarn add --dev file-loader
RUN yarn add --dev style-loader
RUN yarn add --dev css-loader
RUN yarn add -D html-loader

## pug
RUN yarn add --dev pug
RUN yarn add --dev pug-cli#master
RUN yarn add --dev https://github.com/pugjs/pug-cli.git

## watch
RUN yarn add --dev chokidar
RUN yarn add --dev chokidar-cli

## script
### elm
RUN sed -i -e "s/\(\"scripts\": {\)/\1\n    \"build-elm\": \"yarn run elm make \/app\/src\/assets\/elm\/ElmTest.elm --output=\/app\/dist\/elm\/ElmTest.js\",/g" /app/package.json
RUN sed -i -e "s/\(\"scripts\": {\)/\1\n    \"elm-watch\": \"yarn run chokidar '\/app\/**\/*.elm' -p -c 'yarn run build-elm' \",/g" /app/package.json

### pug
RUN sed -i -e "s/\(\"scripts\": {\)/\1\n    \"pug\": \"pug -o \/app\/dist -P \",/g" /app/package.json
RUN sed -i -e "s/\(\"scripts\": {\)/\1\n    \"build-pug\": \"pug \/app\/src -o \/app\/dist \",/g" /app/package.json
RUN sed -i -e "s/\(\"scripts\": {\)/\1\n    \"watch\": \"chokidar '\/app\/**\/*.pug' -p -c 'npm run build-pug' \",/g" /app/package.json

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "chokidar '/app/**/*.pug' -p -c 'npm run build-pug' ",
    "build-pug": "pug /app/src -o /app/dist ",
    "pug": "pug -o /app/dist -P ",
    "elm-watch": "yarn run chokidar '/app/**/*.elm' -p -c 'yarn run build-elm' ",
    "build-elm": "yarn run elm make /app/src/assets/elm/ElmTest.elm --output=/app/dist/elm/ElmTest.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "autoprefixer": "^9.3.1",
    "babel-loader": "^8.0.4",
    "chokidar": "^2.0.4",
    "chokidar-cli": "^1.2.1",
    "clean-webpack-plugin": "^1.0.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.1",
    "elm": "^0.19.0-bugfix2",
    "elm-format": "^0.8.1",
    "esdoc": "^1.1.0",
    "esdoc-standard-plugin": "^1.0.0",
    "eslint": "^5.9.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jasmine": "^2.10.1",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-minifier-webpack-plugin": "^2.0.0",
    "mini-css-extract-plugin": "^0.4.5",
    "node-sass": "^4.10.0",
    "postcss": "^7.0.6",
    "postcss-cli": "^6.0.1",
    "pug": "^2.0.3",
    "pug-cli": "https://github.com/pugjs/pug-cli.git",
    "style-loader": "^0.23.1",
    "stylelint": "^9.8.0",
    "stylelint-config-sass-guidelines": "^5.2.0",
    "stylelint-order": "^1.0.0",
    "stylelint-scss": "^3.4.0",
    "tslint": "^5.11.0",
    "tslint-config-airbnb": "^5.11.1",
    "typedoc": "^0.13.0",
    "typescript": "^3.1.6",
    "uglify-js": "^3.4.9",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0"
  }
}

pug

htmlのテンプレートエンジン

この時点のソース

js

babel

jsのトランスパイラ

IE対応

この時点のソース

chromeのみ

この時点のソース

参考
 参考：builtins

lint

eslintのairbnbを追加

この時点のソース

docs

esdocを追加

この時点のソース

typescript

参考：ts3

この時点のソース

elmとtypescriptをつなぐ

src/assets/elm/ElmTest.d.ts

/**
 * Elmの引数
 */
interface ElmInitArgs {
  node: HTMLElement;
  flags?: any;
}

declare namespace ElmTest.Elm {
  /**
   * メイン
   */
  class Main{
    /**
     * 
     * @param args 
     */
    public static init(args:ElmInitArgs): any;
  }
}
export = ElmTest;