const path = require('path');
const fs = require('fs');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const generateHtmlPlugins = (templateDir) => {
const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
return templateFiles.map(item => {
const parts = item.split('.');
const name = parts[0];
const extension = parts[1];
return new HtmlWebpackPlugin({
filename: `${name}.html`,
template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`),
inject: false,
})
})
};
const htmlPlugins = generateHtmlPlugins('./app/html/pages');
module.exports = {
entry: [
'./app/js/app.js',
'./app/css/index.scss'
],
output: {
filename: './js/bundle.js'
},
devtool: "source-map",
devServer: {
port: 3000
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'app/js'),
use: {
loader: 'babel-loader',
options: {
presets: 'env'
}
}
},
{
test: /\.(sass|scss)$/,
include: path.resolve(__dirname, 'app/css'),
use: ExtractTextPlugin.extract({
use: [
{
loader: "css-loader",
options: {
sourceMap: true,
minimize: true
}
},
{
loader: "resolve-url-loader"
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
})
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'url-loader?limit=10000&name=images/[name].[hash].[ext]',
],
},
{
test: /\.html$/,
include: path.resolve(__dirname, 'app/html/components'),
use: ['raw-loader']
},
{
test: /\.(eot|ttf|woff|woff2)$/,
loader: 'file-loader?name=fonts/[name].[ext]',
},
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new ExtractTextPlugin({
filename: './css/style.bundle.css',
allChunks: true
}),
new CopyWebpackPlugin([
{
from: './app/fonts',
to: './fonts'
},
{
from: './app/img',
to: './img'
}
])
].concat(htmlPlugins)
};