webpackでCSSとJavaScriptのコーディング環境を作る

ツール

webpackの環境を作成したので、そのやり方と自分の環境のメモです。

webpackとはオープンソースのJavaScriptモジュールバンドラーです。主にJavaScript用のモジュールバンドルですが、対応するローダーが含まれている場合、HTML、CSS、画像などのフロントエンドアセットを変換できます。[7] webpackは依存関係のあるモジュールを受け取り、それらのモジュールを表す静的アセットを生成します。

作成したデータはこちら

node.jsをインストールする

node.jsを使うので、インストールしていない場合はnode.jsのページからインストールします。

ダウンロードするのは推奨版でよいと思います。

package.jsonを作成する

次にpackage.jsonを作成します。ターミナルで作業ディレクトリに移動して、

npm init

とするとそのディレクトリにpackage.jsonが作成されます。

事前にpakage.jsonがある場合はnpm installで後述するすべてのパッケージをインストールできるので、他のプロジェクトから同じパッケージを使い回す時はpakage.jsonをコピーしてもってくると早いです。

webpackをインストールする

使用するパッケージをまとめてインストールしても良いのですが、ちゃんとインストールできるか試すため、ひとまずwebpackだけをインストールします。

npm install --save-dev webpack

インストール時にターミナルでエラーが出ていなければインストール成功していると思いますが、なおかつディレクトリ内にnode_modulesというフォルダが出来てればインストールに成功していると思います。このあと、その他使いたいパッケージをインストールしていきます。

ちなみに特に設定せずwebpackをビルドするとCSSも画像もすべてJavaScriptになります。すごい。

パッケージのインストール

使いたい機能のパッケージをインストールします。

npm install パッケージ名 -D
npm i パッケージ名 -D

-Dと–save-devは同じ保存というコマンドで、記述方法が少し違うが命令内容は一緒みたいな記述があるので調べる記事によっては違うことがある。

パッケージをアンインストールする

使ってみたら必要なかった時や、間違った時はアンインストールします。

npm uninstall -D パッケージ名

インストールしたパッケージの設定

インストールしたパッケージはそのままで動くものもあれば設定を書かないと動かないものもあります。設定はwebpack.config.jsをルートに作成し、それに記述します。記述方法はインストールするパッケージによって様々だったりするので、パッケージのページを検索して見に行くと良いです。

環境を構築

今回自分は以下のパッケージをインストールしてpackage.jsonはこのようになりました。(devDependenciesのエリア)

{
  "name": "webpack-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {//ここの説明は後述
    "build": "webpack",
    "build:p": "webpack --mode=production",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {//ここからインストールしたパッケージ
    "@babel/core": "^7.8.6",
    "@babel/preset-env": "^7.8.6",
    "autoprefixer": "^9.7.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "escape-html": "^1.0.3",
    "jquery": "^3.4.1",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss": "^7.0.27",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "browserslist": [//ここはautoprefixerの設定で自分で追加
    "last 2 versions"
  ]
}

簡単に抜粋して機能を説明すると、

  • babel：JavaScriptのコンパイラ
  • autoprefixer：CSSのベンダープレフィックスをつけてくれる
  • escape-html：特殊文字をエスケープしてくれる
  • jquery：jQuery
  • mini-css-extract-plugin：CSSを別ファイルにして書き出す
  • postcss-import：PostCSSで複数のCSSファイルをまとめられるようにする
  • postcss-preset-env：実装予定のCSSが使える。変数やネストに使用
  • style-loader：CSSをstyle要素としてHTMLに反映
  • webpack-dev-server：ローカルサーバー立ち上げ

となります。

webpack.config.jsの設定

次にwebpack.config.jsは以下のように設定しました。ここでビルドしたファイルをどこに置くか等の設定も記述しますので、ファイルへのパスは自分がよいように変更します。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const cssimport = require('postcss-import');
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
    entry: `./src/js/script.js`,//メインとなるJavaScriptファイル（エントリーポイント）
    // ファイルの出力設定
    output: {
      path: path.join(__dirname, 'dist/'),//出力ファイルのディレクトリ名
      filename: "common/js/script.js"// 出力ファイル名
    },

    mode: "development",
   
    devServer: { //開発環境のlocalhostを開く
      contentBase: path.join(__dirname, 'dist'),//開く場所のフォルダ名
      watchContentBase: true,//ファイルを編集した場合自動でリロードするか
      open: true//コマンド入力時に自動でウインドウを開く
    },

    module: {
      rules: [
        {
            test: /\.js$/,
            use: [
              {
                loader: 'babel-loader'
              }
            ]
        },
        {
          test: /\.css/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
            },
            {
              loader: "css-loader",
              options: {
                url: false,
                sourceMap: true,
                importLoaders: 1
              }
            },
            {
              loader: "postcss-loader",
              options: {
                sourceMap: true,//PostCSS側でもソースマップを有効にする
                plugins: [
                  require("autoprefixer")({//autoprefixerを有効化
                    grid: true
                  }),
                  require('postcss-import'),//postcss-importを有効化
                  require('postcss-preset-env')({//postcss-preset-envの設定
                    stage: 0
                  })
                ]
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({//cssの出力先
        filename: 'common/css/style.css'
      }),
    ]
};

開発環境をブラウザで開く

webpack-dev-serverを入れたので、以下のコマンドを入れるとブラウザが開きます。

npx webpack-dev-server

もしくは、package.jsonに

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

と記述したので、

npm run start

でも動きます。このようにpackage.jsonのscriptsには命令を省略して書けるような設定をできるので、よく使う長いコマンドはscriptsに設定すると便利です。

また、これでファイルを編集すると自動でブラウザが更新され編集した修正が反映されます。

このままだとずっとファイルを監視している状態になるので、作業が終わったら以下のコマンドで終了します。

ctrl + c

そのあと「終了しますか？」と聞かれるので、yを入力しEnterを押すと終了します。

開発が完了したら

開発が終わったら、コマンドで

npm run build
npm run build:p

のどちらかを入力し、ファイルをビルドします。このコマンドはpackage.jsonで設定したものなので、設定していない場合は、

npx run webpack
npx run webpack --mode=production

のどちらかを入力します。webpack.config.jsでmodeをdevelopmentと指定しているので、1行目を入力するとjsが圧縮されていない状態でビルド、2行目を入力するとjsが圧縮されたものがビルドされます。

これまでの設定だとこれでビルドしたファイルがdistフォルダ以下に出来上がりますので、それをサーバーにアップすれば作業は完了になります。

node_modulesフォルダの話

webpackに限りませんがビルドツールを使うとnode_modulesフォルダがプロジェクト毎に作成されて結構容量もあります。一応共通化や別のディレクトリに置くことも可能です。

ただプロジェクト毎に作るのが普通みたいなので、Gitならnode_modulesフォルダを除外する、dropboxのような共有ファイルでやる場合は、フォルダを同期しない方法をとるのが良さそうです。

関連記事:

  1. Web制作の時に使用しているFirefoxのアドオン
  2. FacebookのOGPを確認する・キャッシュをクリアする方法
  3. Photoshopで複数の画像に同じ処理を一度で自動適用させる方法
  4. EJSでサイトの共通部分を静的にジェネレートする
スポンサーリンク

コメント

タイトルとURLをコピーしました