コーダーから見たwebpack

webpack、ようやくちゃんと触ってみました。

私は主に、Railsアプリ作成と静的ページのコーディングをしています。
今後はJavaScriptもゴリゴリ書いていきたいと思っているので、webpackの事始めとしてまずはコーディングの環境を作ってみました。

webpackでできること

コーダー目線で考える、webpackでできることは以下の通りです。

• ローカルサーバーを立てる
• ホットリロード（ファイルを変更した時にブラウザが自動でリロードされる）
• Sassのコンパイル
• Pugのコンパイル
• 画像ファイルの圧縮
• CSSのminify
• CSS、画像ファイル等の名前を変えることで、キャッシュが残って変更が反映されない問題を防ぐ
• コーディングに必要なライブラリをpackage.jsonで管理する
  • swiper(スライドショー)とか、chart.js(グラフ)とか

webpackがなくてもできそうなことも多いですね。
でも今の時代、JavaScriptが絡んでくるとwebpackが採用される可能性がかなり高いので、今後も積極的に使っていこうと思います。

導入

###前提
node.jsがインストールされている。

$ node -v
# v13.11.0

###ディレクトリを作成
以下のような構成を作ります。後のコマンドで自動で生成されないものは、手動で作っておきましょう。

dist                #ビルドの結果が格納される。基本触らない
src                 #ソースを格納
 ├── images/          # 画像
 ├── javacscripts/    # Javarcript
 ├── stylesheets/     # Sass
 ├── templates/       # Pug
node_modules
package.json
package-lock.json
webpack.config.js

terminal

$ mkdir src
$ mkdir src/images
$ mkdir src/javascripts
$ touch src/javascripts/index.js
$ mkdir src/stylesheets
$ mkdir src/templates

###webpack.config.jsを作成

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'production',
  // devtool: 'eval-source-map',
  entry: {
    main: './src/javascripts/index.js',
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'javascripts/[name]-[hash].js',
  },
  module: {
    rules: [],
  },
  plugins: [],
};

###webpack本体を導入

$ npm init -y
$ npm install --save-dev webpack webpack-cli
$ npx webpack --mode=development

###gitでの管理を開始

$ git init
$ touch .gitignore

.gitignore

node_modules/
dist/

$ git add -A
$ git commit -m "First commit"

###Pugを導入

$ npm install --save-dev html-webpack-plugin html-loader pug-html-loader

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
//省略
  module: {
    rules: [
      {
        test: /\.pug/,
        use: [
          {
            loader: 'html-loader',
          },
          {
            loader: 'pug-html-loader',
            options: {
              pretty: true,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/templates/index.pug',
      filename: 'index.html',
    }),
  ],
};

$ touch src/templates/index.pug
$ npx webpack --mode=development

###Sassを導入

$ npm install --save-dev css-loader sass-loader node-sass mini-css-extract-plugin

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//省略
module.exports = {
//省略
  module: {
    rules: [
      {
        test: /\.(css|scss|sass)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
//省略
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'stylesheets/[name]-[hash].css',
    }),
//省略
  ],
};

$ touch src/stylesheets/style.scss

src/javascripts/index.js

import '../stylesheets/main.scss';

$ npx webpack --mode=development

###画像の読み込み、圧縮

$ npm install --save-dev file-loader image-webpack-loader

webpack.config.js

//省略
const imageRoot = '/'
//サブディレクトリにデプロイする場合、ディレクトリ名を指定
//画像のパスを正しく設定できるように
//const imageRoot = '/projectA/20200415/dist'

module.exports = {
//省略
  module: {
    rules: [
      {
        test: /\.(css|scss|sass)$/,
//省略
      },
      {
        test: /\.(png|jpg|jpeg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false,
              name: 'images/[name]-[hash].[ext]',
              publicPath: imageRoot,
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
            },
          },
        ],
      },
      {
        test: /\.pug/,
//省略

src/images/に適当な画像ファイルを配置 → pugファイルから読み込んで

$ npx webpack --mode=development

dist/images/中の画像ファイルが圧縮されていれば成功。
###ローカルサーバーで開発

• ローカルサーバーを使った開発
• ホットリロード
• ビルド前にdistディレクトリの中身を自動で削除する

この3つを実装します。

$ npm install --save-dev clean-webpack-plugin webpack-dev-server

webpack.config.js

const path = require('path');
//省略
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
//省略
  plugins: [
//省略
    new CleanWebpackPlugin(),
  ],
};

$ npx webpack-dev-server

http://localhost:8080にアクセスすると、開発中のファイルを確認することができます。

###npm scriptを登録
いちいちnpx webpack --mode=developmentとか打ち込むのは面倒なので。

package.json

{
  "scripts": {
   "start": "webpack-dev-server",
    "build": "webpack",
    "build:dev": "webpack --mode=development"
  },
}

ついでに.zshrcにもエイリアスを貼っておきましょう。

.zshrc

alias ns='npm run'

これでnpx webpack --mode=developmentがns build:devに省略されました。

• ローカルサーバーを立てて開発をする時にns start
• 本番で使うファイルを生成したい時にns build
• 開発環境でファイルの実体を確認にns build:dev

を使います。ns startで開発中、変更内容はすべてメモリ領域に保存され、dist内にファイルが出力されることはないので注意。

###Pugの編集を楽にする
今の状態だと、pugファイルを追加するたびにwebpack.config.jsに追記する必要があります。

こういうやつ

plugins: [
    new HtmlWebpackPlugin({
      template: './src/templates/index.pug',
      filename: 'index.html',
    }),
    new HtmlWebpackPlugin({
      template: './src/templates/about.pug',
      filename: 'about.html',
    }),
    new HtmlWebpackPlugin({
      template: './src/templates/contact.pug',
      filename: 'contact.html',
    }),

毎回追記するのはシンドいので、一括で指定できるようにしましょう。

$ npm install --save-dev globule

webpack.config.js

//省略
const globule = require('globule')
//省略

//削除↓
//module.exports = {
const app = {
//省略
  plugins: [
//省略
    //削除↓
    //new HtmlWebpackPlugin({
    //  template: './src/templates/index.pug',
    //  filename: 'index.html',
    //}),
//省略
  ],
};

const templates = globule.find(
  './src/templates/**/*.pug', {
    ignore: [
      './src/templates/**/_*.pug'
    ]
  }
)

templates.forEach((template) => {
  const fileName = template.replace('./src/templates/', '').replace('.pug', '.html')
  app.plugins.push(
    new HtmlWebpackPlugin({
      filename: `${fileName}`,
      template: template,
    })
  )
})

module.exports = app

###Autoprefixerを導入

$ npm install --save-dev postcss-loader autoprefixer 
$ touch .browserslistrc 

.browserslistrc

> 0.5% in JP

webpack.config.js

module: {
    rules: [
      {
        test: /\.(css|scss|sass)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: { sourceMap: true },
          },
//追加ここから
          {
            loader: "postcss-loader",
            options: {
              plugins: [
                require("autoprefixer"),
              ],
            },
          },
//追加ここまで
          {
            loader: 'sass-loader',
          },
        ],
      },

###faviconを設定
faviconはdist直下に置く必要があるので、copy-webpack-pluginを使います。

$ npm i -D copy-webpack-plugin

webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");
//省略
  plugins: [
    //省略
    new CopyPlugin([
      {
        from: "./favicon.png",
        to: "favicon.png",
      },
    ]),
  ],

src/templates/_layout.pug

link(rel="icon", href="/favicon.png" type='image/png')

###ライブラリをpackage.jsonで管理
swiper.jsを使って、スライダーを導入してみます。

$ npm install --save-dev swiper
$ touch src/javascripts/swiper.js
$ touch src/templates/swiper_test.pug

src/javascripts/swiper.js

import Swiper from 'swiper'
import 'swiper/css/swiper.css'

const options = {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
}
const mySwiper = () => {
  new Swiper ('.swiper-container', options)
}
export default mySwiper

src/javascripts/index.js

//省略
import swiper from './swiper.js'
swiper()

src/templates/swiper_test.pug

.swiper-container
  .swiper-wrapper
    .swiper-slide Slide 1
    .swiper-slide Slide 2
    .swiper-slide Slide 3
  .swiper-pagination
  .swiper-button-prev
  .swiper-button-next

バンドル時に、ファイルサイズが大きすぎる的な警告が出ました。webpack.config.jsに以下を追記して警告を非表示にしました。

webpack.config.js

const app = {
//省略
  performance: {
    maxEntrypointSize: 500000,
    maxAssetSize: 500000,
  }
//省略
}

##すぐに設定したい人向け
githubにソースをアップしたので、クローンして使ってください。
https://github.com/nyshk97/qiita-webpack-coding

$ git clone https://github.com/nyshk97/qiita-webpack-coding.git
$ cd qiita-webpack-coding
$ npm install
$ npm run build
$ npm start

##おまけ
プロジェクトをDropboxに配置している場合、node_moduleが共有されるとめんどくさい。
node_moduleだけ同期を解除したい場合には以下のコマンドで解決。

$ xattr -w com.dropbox.ignored 1 ~/Dropbox/<project名>/node_module

長いのでエイリアスを貼ってます。

.zshrc

alias dignore='xattr -w com.dropbox.ignored 1'

$ dignore ~/Dropbox/<project名>/node_module

参考

• Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win) | Udemy
• 【脱gulp】webpackでpugを使う。jsonで一括ビルドも。 | 上間ウェブ店
• 【脱jQuery】jqueryレスの高機能スライダー"swiper"をwebpackで使う方法。複数設置例も。 | 上間ウェブ店