// webpack.config.js
const path = require("path");
const MODE = "development";
const enabledSourceMap = MODE === "development";
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const globule = require("globule");
const webpack = require('webpack');
const app = {
mode: MODE,
entry: ['./src/js/index.js'],
output: {
path: path.resolve(__dirname, "dist"),
filename: "./js/bundle.js",
},
devtool: "source-map",
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
],
},
},
],
},
{
test: /\.scss/, // 対象となるファイルの拡張子
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
options: {
url: false,
sourceMap: enabledSourceMap,
importLoaders: 2,
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
["autoprefixer", { grid: true }],
],
},
},
},
{
loader: "sass-loader",
options: {
sourceMap: enabledSourceMap,
},
},
],
},
{
test: /\.pug$/,
use: [
{
loader: "pug-loader",
options: {
pretty: true,
globals: ["page"],
self: true,
root: path.resolve(__dirname, 'src/pug')
}
}
]
}
],
},
devServer: {
static: {
watch: true,
directory: `${__dirname}/src`,
},
open: true
},
plugins: [
new MiniCssExtractPlugin({
filename: "./css/style.min.css",
}),
new CopyPlugin({
patterns: [{
from: `${path.resolve(__dirname, "src")}/img/`,
to: `${path.resolve(__dirname, "dist")}/img/`
}],
}),
new webpack.ProvidePlugin({
$: 'jquery'
})
],
target: ["web",'es5'],
devtool: "source-map",
watchOptions: {
ignored: /node_modules/ //正規表現で指定
}
};
//srcフォルダからpngを探す
const templates = globule.find("./src/pug/**/*.pug", {
ignore: [
"./src/pug/**/_*.pug",
]
});
//pugファイルがある分だけhtmlに変換する
templates.forEach((template) => {
const fileName = template.replace("./src/pug/", "").replace(".pug", ".html");
app.plugins.push(
new HtmlWebpackPlugin({
filename: `${fileName}`,
template: template,
inject: false, //false, head, body, trueから選べる
minify: false //本番環境でも圧縮しない
})
);
});
module.exports = app;