【Webpack】入門2 - 急いでイソイテク

#########################
# .babelrc
#########################
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react" // JSXのコンパイル用
    ]
}

#########################
# index.js
#########################
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <div>Helloooooooooo, ReeeeaAAAAAccckTTTtttu !!!</div>
    document.getElementById('root')
)

#########################
# webpack.config.js
#########################
const HtmlWebpackPlugin = require('html-webpack-plugin')
：
module.exports = {
    ：
    module: {
        rules: [
            ：
            {
                test: /\.jsx?$/,
                loader: "babel-loader",
                exclude: /node_modules/
            } ,
            {
                test: /\.html$/,
                loader: "html-loader",
            }
       ]
    },
    ：
    plugins: [
        new HtmlWebpackPlugin({
            // 雛形ファイル名
            template: './src/index.html',
            // 雛形HTMLをベースにして最終的に出力するファイル
            filename: './index.html'
        })
    ]
}

#########################
# src/index.html
# ※dist/index.htmlは自動生成されるものとなり、不要になるので、dis/からsrc/へ移動しておく。
#########################
<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="utf-8">
       <title>Hi, Webpaaaaacckkkkkk!!!</title>
   </head>
    <body>
        <script src="main.js"></script>
    </body>
</html>

#########################
# index.js
#########################
import React from 'react'
import ReactDOM from 'react-dom'
import './style.css' // cssのhaikeiクラスをimportするため
import './style.scss' // scssのdivタグのスタイルをimportするため

ReactDOM.render(
    <div>Helloooooooooo, ReeeeaAAAAAccckTTTtttu !!!</div>,
    document.getElementById('root')
)

#########################
# webpack.config.js
#########################
const HtmlWebpackPlugin = require('html-webpack-plugin')
：
module.exports = {
    ：
    module: {
        rules: [
            // 下記理由によりコメントアウトし、scss側と合体する。
            // ・css用の設定とscss用の設定の違いはsass-loaderを適用するかどうかである。
            // ・scssはcssと互換性があり、cssファイルに対してsass-loaderを適用できる。
            // {
            //     test: /\.css$/,
            //     use: [
            //         // 'style-loader', // styleタグに出力するためのもので、mini-css-extractプラグインを使って別ファイルCSSを読み込む場合は不要となるため、不使用。
            //         MiniCssExtractPlugin.loader,
            //         'css-loader'
            //     ]
            // },
            {
                // どういったルールで登録するのか。正規表現で書く
                // test: /\.scss$/,
                test: /\.(sc|c)ss$/, // cssも適用できるようにする。
                // 何を登録し適用させるのか
                // 下記に書くものは順序に注意が必要である。
                // 並び順とは逆順に評価・実行される。
                // つまり下記は、sass-loader、css-loader、mini-css-extractプラグインloaderの順序で実行される。
                use: [
                    // 'style-loader', // styleタグに出力するためのもので、mini-css-extractプラグインを使って別ファイルCSSを読み込む場合は不要となるため、不使用。
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
          ：
       ]
    },
    ：
    plugins: [
        ：
        new MiniCssExtractPlugin({
            // HTMLとは別最終的に出力するファイル
            // ※importしたスタイルシートをこれにバンドルして放り込む
            // ※[name]はデフォで'main'となる。
            // ※[hash]はバンドル時にユニークな番号を生成して、ユニークなファイル名を付ける。
            //   ※Proxyサーバのキャッシュを回避するためにユニークにする、というテク。
            filename: '[name].[hash].css'
        })
    ]
}

#########################
# src/index.html
#########################
<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="utf-8">
       <title>Hi, Webpaaaaacckkkkkk!!!</title>
   </head>
    <body class="haikei">  ★ここ変えた★
        <div id="root"></div>
    </body>
</html>

#########################
# webpack.config.js
#########################
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
：
module.exports = {
    ：
    optimization: { // optimization：Webpack4から導入された。
        minimizer: [
            new UglifyJsPlugin({
                // console.log除去以外のオプションは下記参照
                // https://github.com/mishoo/UglifyJS2#compress-options
                uglifyOptions: {
                    compress: {
                        drop_console: true
                    }
                }
            })
        ],
    },
}

#########################
# webpack.config.js
#########################
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
：
module.exports = {
    ：
    optimization: { // optimization：Webpack4から導入された。
        minimizer: [
           ：
            new OptimizeCSSAssetsPlugin({})
        ],
    },
}

#########################
# webpack.config.js
#########################

module.exports = {
    ：
    // 他の選択肢は下記から
    // https://webpack.js.org/configuration/devtool/#devtool
    devtool: 'eval-source-map'
}