Webpackで行っていることを順番に試して、webpack-dev-serverで確認したメモ

-
Webpackで行っていることを順番に試して、webpack-dev-serverで確認したメモ:


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;


lint

  • air-bnb-tsingtのduplicateのtypeCheckがrequireとwarningが出るのでfalseにする。


css


sass

この時点のソース

node-sassでSassファイルをコンパイルする
超絶・超速のNODE-SASSでSASSコンパイルのすすめ


postcss

bin/postcss/autoprefix.sh : sassから出力されたdist/css/*.cssを置き換える。

この時点のソース

PostCSS まとめ


postcss.config.json の使用

この時点のソース

  • ついでにminifyも行う
postcss
css nano
cssnanoを通したらベンダープレフィックスが消えて困った時のメモ


sass-lint

情報が少ない。。

sass
sass-lint
sass-lintのエラールールを日本語で分かるようにした


stylelint

sass記法は対応していなさそう。

sassにこだわりがあるわけではないので、scss記法に直した。

この時点のソース

npmのみでSassのstylelint 〜webpackとPostCSS不要編〜
チームで美しくメンテナブルなCSSを書くための 「Stylelint」導入のすすめ
stylelintのorderモジュール選定
実務でstylelintを導入して3ヶ月ぐらいたった感想
stylelintとBackstopJSで安全にcssを書ける環境を作った


elm

最初のHTML表示時点でのソース

この時点のソース

elm ドキュメント 日本語版


optimized調査

100kb -> 15kb まで圧縮

この時点のソース

How to optimize Elm code


webpack

[webpack]尖りすぎない人のwebpack設定

[webpack]CSS LoaderでCSSの圧縮してる人は最新版でminimizeオプションが削除されてるから気をつけて。


css-loaderとstyle-loaderの違い


mini-css plugin

  • jsファイルに import '../css/style.css'; のように書き込んだものをcssファイルとして出力する。
この時点のソース

webpack@4 でCSSを抽出する際は mini-css-extract-plugin を使う


cssもcopyfileでまかなう

  • postcssでminifyを行ったので、webpackで行う必要はない、、？
gulp.distをCopyWebpackPluginで再現する
この時点のソース


webpack-dev-serverのhotloadでcssも賄いたい欲

  • hotloadは便利。


webpack-dev-server

  • --hotオプションをつけるか、webpack.config.jsにwebpack.HotModuleReplacementPluginが必要
    devServer.hot


watchに対応


  • bin/up.shで起動したときに、watchコマンドを実行するようにしている
この時点のソース

コメント

コメントを投稿

このブログの人気の投稿

投稿時間:2021-06-17 22:08:45 RSSフィード2021-06-17 22:00 分まとめ(2089件)

-
カテゴリー等 サイト名等 記事タイトル・トレンドワード等 リンクURL 頻出ワード・要約等/検索ボリューム 登録日 IT 気になる、記になる… ｢iOS 15｣の新機能の一部は｢iPhone XS｣以降でしか利用出来ないものも https://taisy0.com/2021/06/15/141888.html tomac 2021-06-15 13:11:47 IT ITmedia 総合記事一覧 [ITmedia Mobile] ソースネクストの「ポケトーク」に新機能　グループ翻訳とWeb会議への字幕付与に対応 https://www.itmedia.co.jp/mobile/articles/2106/15/news164.html itmediamobile 2021-06-15 22:10:00 AWS AWS Architecture Blog Field Notes: Benchmark...
続きを読む

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

-
カテゴリー等 サイト名等 記事タイトル・トレンドワード等 リンクURL 頻出ワード・要約等/検索ボリューム 登録日 IT 気になる、記になる… ｢iOS 15｣の新機能の一部は｢iPhone XS｣以降でしか利用出来ないものも https://taisy0.com/2021/06/15/141888.html tomac 2021-06-15 13:11:47 IT ITmedia 総合記事一覧 [ITmedia Mobile] ソースネクストの「ポケトーク」に新機能　グループ翻訳とWeb会議への字幕付与に対応 https://www.itmedia.co.jp/mobile/articles/2106/15/news164.html itmediamobile 2021-06-15 22:10:00 AWS AWS Architecture Blog Field Notes: Benchmark...
続きを読む

投稿時間:2021-06-17 05:05:34 RSSフィード2021-06-17 05:00 分まとめ(1274件)

-
カテゴリー等 サイト名等 記事タイトル・トレンドワード等 リンクURL 頻出ワード・要約等/検索ボリューム 登録日 IT 気になる、記になる… ｢iOS 15｣の新機能の一部は｢iPhone XS｣以降でしか利用出来ないものも https://taisy0.com/2021/06/15/141888.html tomac 2021-06-15 13:11:47 IT ITmedia 総合記事一覧 [ITmedia Mobile] ソースネクストの「ポケトーク」に新機能　グループ翻訳とWeb会議への字幕付与に対応 https://www.itmedia.co.jp/mobile/articles/2106/15/news164.html itmediamobile 2021-06-15 22:10:00 AWS AWS Architecture Blog Field Notes: Benchmark...
続きを読む