コード・実装

【Webpack入門】WebpackをWEB制作で使用する方法(js/scssのコンパイル)

この度サイト制作でWebpackを導入したので、そちらの方法を共有しようと思います。

最終的にやりたかったことは、srcフォルダ内のjsとscssファイルをassetsフォルダにコンパイルしてまとめるということです。(CSSは別ファイルとしてまとめる)

Webpackの基礎

Webpackとは?

webpack は JavaScript などの依存関係のあるリソース(モジュール)を適切に1つのファイルにまとめてくれるツール(モジュールバンドラー)です。JavaScript ファイル以外にも cssファイルや画像ファイルなどもまとめることができます。

webpackを使ってみる

下記のような形でsrc内フォルダのindex.jsを、distフォルダのmain.jsに出力する形です。

  1. node.jsのインストール
  2. npm セットアップ
  3. webpackインストール
  4. webpack.config.js編集
  5. package.json編集
  6. 実際のファイルを作成
  7. 実行

①node.jsのインストール

事前にnode.jsをインストールしておきます。

公式: https://nodejs.org/ja/

②npm セットアップ

プロジェクトフォルダ内で下記コマンド

$ npm init -y

 

③webpackインストール

$ npm i -D webpack webpack-cli

 

④webpack.config.js編集

// 基礎的な書き方

const path = require('path');

module.exports = {
    // モードの設定
    mode: 'development',

    // エントリーポイントの設定(作業ディレクトリからの相対パス)
    entry: path.join(__dirname, 'src', 'index.js'),
  
    // ファイルの出力設定
    output: {
      // 出力するファイル名
      filename: "main.js",
  
      //  出力先のパス
      path: path.join(__dirname, 'dist')
    }
  };

 

⑤package.json編集

{
  ...

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // ここから追加
    "build": "webpack --mode development",
    "prod": "webpack --mode production",
    "dev": "webpack --mode development --watch",
    // ここまで追加
  },

  ...
}

 

⑥実際のファイルを作成

プロジェクトフォルダ内に、srcフォルダと、その中にindex.jsを作成

⑦実行

モード: developmentで実行の場合

$ npm run build

 

他、productionモードの時は ‘npm run prod’、watchモードの時は、’npm run dev’になります。

実行結果として、distフォルダにmain.jsファイルが出力されます。

 

js/scssのコンパイルをしてみる(CSSは別ファイルとしてまとめる)

基礎を試してみたことで、今度は実際に下記のような形でやってみたいと思います。

  1. node.jsのインストール / npm セットアップ / webpackインストール
  2. 必要なパッケージのインストール
  3. webpack.config.js編集
  4. postcss.config.jsの作成
  5. package.json編集
  6. 実際のファイルを作成
  7. 実行

①node.jsのインストール / npm セットアップ / webpackインストール

基礎編のやり方と同じです。(プロジェクトフォルダ内で実行)

$ npm init -y
$ npm i -D webpack webpack-cli

 

②必要なパッケージのインストール

下記パッケージをインストールします。

  • css-loader
  • sass-loader
  • postcss-loader
  • MiniCssExtractPlugin
  • webpack-fix-style-only-entries
  • autoprefixer
$ npm i --save-dev css-loader
$ npm i --save-dev sass-loader sass
$ npm i --save-dev postcss-loader postcss
$ npm i --save-dev mini-css-extract-plugin
$ npm i --save-dev webpack-fix-style-only-entries
$ npm i --save-dev autoprefixer

インストール後、package.jsonにパッケージがインストールされていることを確認。

③webpack.config.js編集

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');


module.exports = {
    // コンパイルモード
    mode: 'production',
    // エントリーポイントの設定
    entry: {
        // コンパイル対象のファイルを指定
        'index': path.resolve(__dirname, "./src/js/index.js"),
        'style.css': path.resolve(__dirname, './src/scss/style.scss')
    },
    // 出力設定
    output: {
        path: path.resolve(__dirname, './assets/'), // 出力先フォルダを絶対パスで指定
        filename: 'js/[name].js' // [name]にはentry:で指定したキーが入る
    },
    module: {
        rules: [
            // sassのコンパイル設定
            {
                test: /\.(sa|sc|c)ss$/, // 対象にするファイルを指定
                use: [
                    MiniCssExtractPlugin.loader, // JSとCSSを別々に出力する
                    {
                        loader: 'css-loader',
                        options: {
                            import: false,
                            url: false, //URL の解決を無効に
                        }
                    },
                    'postcss-loader', // オプションはpostcss.config.jsで指定
                    'sass-loader',
                    // 下から順にコンパイル処理が実行されるので、記入順序に注意
                ]
            },
            {
                // Babel 用のローダー
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new FixStyleOnlyEntriesPlugin(), // CSS別出力時の不要JSファイルを削除
        new MiniCssExtractPlugin({ // CSSの出力先
            filename: 'css/[name]'// 出力ファイル名を相対パスで指定([name]にはentry:で指定したキーが入る)
        })
    ],
    // node_modules を監視(watch)対象から除外
    watchOptions: {
        ignored: /node_modules/
    }
};

 

④postcss.config.jsの作成

postcss.config.jsというファイルを作成してください。自動で実行されます。

module.exports = {
    plugins: [
        require('autoprefixer')({ // 自動でベンダープレフィックスを付与
            "overrideBrowserslist": [ // 対象ブラウザの設定
                "last 2 versions",
                "ie >= 11",
                "Android >= 4"
            ]
        })
    ]
};

 

⑤package.json編集

{
  ...

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // ここから追加
    "build": "webpack --mode development",
    "prod": "webpack --mode production",
    "dev": "webpack --mode development --watch",
    // ここまで追加
  },

  ...
}

 

⑥実際のファイルを作成

srcフォルダに下記のようなファイルを作成しておきます。

assetsにコンパイル後に生成ファイルが出力されます。

また、style.scssは各scssファイルを読み込むために下記のように記述しています。

@charset "UTF-8";

// ファイル読み込み
@import "parts/a";
@import "parts/b";

 

⑦実行

 

モード: developmentで実行の場合

$ npm run build

 

他、productionモードの時は ‘npm run prod’、watchモードの時は、’npm run dev’になります。

実行結果として、assetsフォルダに各種ファイルが出力されます。

以上です!

 

 

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】