‍🦔 /distと/srcのファイル名・フォルダ名を一致させ、メンテナンス性を高める
JavaScript webpack ENJIN
作成日： 2022/01/03
2

出力先・出力ファイル名を変更する

現在の階層構造は下記の通り

webpack-tutorial
├dist/
|   ├──bundle.js
|   ├──index.html
|   └──main.css 
|
├node_modules/
├src/
|   ├──images/
|   ├──index.js
|   ├──style.scss
|   └──sub.js
|
├package-lock.json
├package.json
└webpack.config.js

出力先・出力ファイル名を変えるには、webpack-config.jsを変更する。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: `${__dirname}/dist`,
        //ここから変更
        filename: './js/bundle.js'
        //ここまで変更
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(css|sass|scss)/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        //ここから変更
        new MiniCssExtractPlugin({
            filename: './css/style.css'
        }),
        //ここまで変更
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin()
    ]
}

webpackを起動すると分かるが、これにより、dist/内に出力されるHTMLのCSS・JS参照先も自動的に書き変わる。
build後の階層構造

webpack-tutorial
├dist/
|   ├──css/
|   |   └──style.css
|   ├──js/
|   |   └──bundle.js
|   └──index.html
|
├node_modules/
├src/
|   ├──images/
|   ├──index.js
|   ├──style.scss
|   └──sub.js
|
├package-lock.json
├package.json
└webpack.config.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!-- 参照先が自動的に書き変わっている -->
<script defer src="./js/bundle.js"></script><link href="./css/style.css" rel="stylesheet"></head>
<body>
    <h1>webpackチュートリアル<span>(SCSSを追加)</span></h1>
    <img src="/src/images/mountain.jpg" alt="">
    <img src="/src/images/sea.jpg" alt="">
</body>
</html>

src/配下の構成も変更する

現在はwebpack-config.jsを見ないと、どのsrc/配下ファイルがdist/配下ファイルに対応しているかが分からない。
これだと効率が悪いので、ひと目見て分かるように、dist/配下に合わせる。

変更後

webpack-tutorial
├dist/
|   ├──css/
|   |   └──style.css
|   ├──js/
|   |   └──bundle.js
|   └──index.html
|
├node_modules/
├src/
|   ├──images/
|   ├──js/
|   |   ├──index.js
|   |   └──sub.js
|   ├──scss/
|   |   └──style.scss
|   └──templates/
|       └──index.html
|
├package-lock.json
├package.json
└webpack.config.js

この状態でwebpackを起動するとエラーが出る。
src/配下のフォルダ構成が変わったことにより、参照先が変わったためで、これらを変更する必要がある。

エントリーポイントのJSファイルの参照先

//webpack-config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    //ここから変更
    entry: './src/js/index.js',
    //ここまで変更
    output: {
        path: `${__dirname}/dist`,
        filename: './js/bundle.js'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(css|sass|scss)/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './css/style.css'
        }),
        new HtmlWebpackPlugin({
            //ここから変更
            template: './src/templates/index.html'
            //ここまで変更
        }),
        new CleanWebpackPlugin()
    ]
}

エントリーポイントで指定しているscssの参照先

import { hello } from './sub.js'
//ここから変更
import '../scss/style.scss'
//ここまで変更
hello('hello world');

エラー解消のポイントは、一つ一つ読み解いて対応する

↓だったら、「index.htmlが見つかりません」 = 指定先が間違っている
ERROR in Error: Child compilation failed: Module not found: Error: Can't resolve '/Users/yu/Desktop/webpack-tutorial2/src/index.html' in '/Users/yu/Desktop/webpack-tutorial2' ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/yu/Desktop/webpack-tutorial2/src/index.html' in '/Users/yu/Desktop/webpack-tutorial2'

webpackを起動

ブラウザで確認
Yu
事業会社にてコーダーをしています。制作は6年目。 インプットしたことをアウトプットしています。