webpackBabel.config.js

"use strict";
const mode = "development";
const enabledSourceMap = mode === "development";
const path = require("path");

module.exports = {
    mode:mode,
    devtool:"source-map",
    target:"node",
    context:path.resolve(__dirname,"src"),
    entry:"./js/main.js",
    output:{
        path:`${__dirname}/dist`,
        filename:"[name]Min.js"
    },
    module:{
        rules:[{
                //sassをコンパイル
                test:/\.scss/,
                use:[
                    "style-loader",
                    {
                        loader:"css-loader",
                        options:{
                            url:true,
                            sourceMap:enabledSourceMap,
                            importLoaders:2
                        }
                    },
                    {
                        loader:"postcss-loader",
                        options:{
                            sourceMap:enabledSourceMap,
                            postcssOptions:{
                                plugins:[
                                    require("autoprefixer")({
                                        grid:true
                                    })
                                ]
                            }
                        }
                    },
                    {
                        loader:"sass-loader",
                        options:{
                            sourceMap:enabledSourceMap
                        }
                    }
                ]
            }
            ,
            {
                //imageファイルもjsにハンドル
                test:/\.(gif|png|jpg)$/i,
                loader:"url-loader"
            },
            {
                //例: jsファイルがimportされたらbable-loaderを使ってコンパイル
                test:/\.js$/,
                use:[
                    {
                        loader:"babel-loader",
                        options:{
                            presets:[
                                "@babel/preset-env"
                            ]
                        }
                    }
                ]
            }
        ]
    }
}