Webpack

公開日 2020/9/5 最終更新日 2020/9/6

Node.jsのインストール

macなら便利なツール「nvm」がある

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

・nvm --version で確認

※zsh: command not found: nvmと出る場合

・touch ~/.zshrc を実行（新規ファイルを作成します）

・もう一度 curl コマンドを実行

・ターミナルを再起動

・nvm --version で確認

nvm ls-remote

バージョンがずらーっと出てくる

Latest LTSが安定版

インストールする

nvm install 12.18.3

確認する

nvm ls

node --version

Webpackインストール

mkdir ~/project/webpack

 cd ~/project/webpack

npm init

いくつか項目を聞かれるのでenterで最後yes

lsでみるとpackage.jsonがはいっている

これをエディタで開く※僕はVScode

code .

.で今いるディレクトリを開ける

でpackage.jsonファイルを開き

licenseを書き換え、privateを追加

//package.json


  "license": "UNLICENSED",
  "private": true

npm view webpack

これでwebpackの最新版がいくつあるかを確認できる

npm install --save-dev webpack@バージョン

すると

npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "webpack" under a package
npm ERR! also called "webpack". Did you name your project the same

こんなエラーがでるのでpackage.jsonのnameのwebpackを変更する

で、もう一度

npm install --save-dev webpack@バージョン

package.jsonが変更され、新たなフォルダやファイルも作成されている

次にwebpack-cliを確認

npm view webpack-cli

latest:〇〇○をコピーする

npm install --save-dev webpack-cli@〇〇〇

これで準備オーケー。

※オプションコマンド補足

–save-devとは

開発用にパッケージをインストールできるようになる

–saveとは

“devDependencies”の中に”webpack-cli”:”〇〇〇”が入る

これを使うとnpm install プロジェクト名のコマンドでインストール出来るようになる。

-gとは

グローバルにインストール

しかし、グローバルにインストールするとバージョンのコンフリクトが起こる可能性がある為、プロジェクトごとにインストールするのが推奨されている。

Webpackの設定ファイル

webpack.config.jsのファイルを作る

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
    }
}

path.resolveで絶対パス取得、__dirnameは現在のフォルダの階層を意味している。

npx webpack --mode development

成功

の流れ

CSSを読み込む

npm view css-loader

npm install --save-dev css-loader@4.2.2

@はlatestのバージョン

package.jsonに”css-loader”: “^4.2.2″が記載されてればオーケー

次にwebpack.config.jsファイルをいじる

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'main.js'
    },
    module: {
        rules: {
            test: /\.css/,
            use: [
                {
                    loader: 'css-loader'
                }
            ]
        }
    }
}

module:{}を新たに追加。

.cssファイルが見つかればloaderを使ってくれという意味

npx webpack --mode development

実行〜

次に読み込んだcssをブラウザに反映されるようにする。

npm view style-loader

npm install --save-dev style-loader@1.2.1

@はlatest:のバージョン

package.json確認して”style-loader”: “^バージョン”があればオーケー

次にstyle-loaderの設定

                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                    },
                ],

webpack.config.[JavaScript]のuse:[]内にstyle-loaderを加える。

この際、読み込みは下から行われるのでcss-loaderから読み込みされる。

npx webpack --mode development

css読み込みされてるかブラウザで確認

open -a "Google Chrome" ./dist/index.html

gitにcommit

git status

git add .

git status

git commit

メッセージ追加

 git log

 git push //初回のcommitではgit push -u origin master

CSSを別ファイルに出力するプラグイン

npm view mini-css-extract-plugin

latest:〇〇と最新版がでる

npm install --save-dev mini-css-extract-plugin@〇〇

package.jsonにmini-css-extractがあればオーケー

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'main.js',
    },
    module: {
        rules: [
            {
                test: /\.css/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                    },
                ],
            },
        ],
    },
    plugins:[
        new MiniCssExtractPlugin(),
    ],
}

npx webpack --mode development

HTMLを自動生成するプラグイン

npm view html-webpack-plugin

latest:〇〇確認

npm install --save-dev html-webpack-plugin@〇〇

package.jsonにhtml-webpack-pluginがあるか確認

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'main.js',
    },
    module: {
        rules: [
            {
                test: /\.css/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                    },
                ],
            },
        ],
    },
    plugins:[
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin(),
    ],
}

npx webpack --mode development

index.html
main.css
main.js

の3つのファイルが出来る

webpack.config.jsのpluginsを以下に変更

    plugins:[
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
    ],

以下を実行

npx webpack --mode development

BLOG