434 lines
11 KiB
JavaScript
434 lines
11 KiB
JavaScript
const autoprefixer = require('autoprefixer');
|
|
const path = require('path');
|
|
const webpack = require('webpack');
|
|
const merge = require('webpack-merge');
|
|
const glob = require('glob-all');
|
|
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
const ImageminWebpackPlugin = require('imagemin-webpack-plugin').default;
|
|
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
|
|
const PurifyCSSWebpackPlugin = require('purifycss-webpack');
|
|
|
|
// Determines whether this build is going to be a development build.
|
|
// const isDev = process.env.NODE_ENV === 'development';
|
|
const isDev = process.env.NODE_ENV !== 'production';
|
|
|
|
const isDevServer = path.basename(require.main.filename) === 'webpack-dev-server.js';
|
|
|
|
// Maximum inlining file size in Bytes
|
|
const maxInlineFileSize = 0;
|
|
|
|
// Standard assets output path
|
|
const assetHash = 'hash';
|
|
const assetOutputDir = `assets/[${assetHash}:2]`;
|
|
const assetOutputFilename = `[name]-[${assetHash}].[ext]`;
|
|
const assetOutputPath = `${assetOutputDir}/${assetOutputFilename}`;
|
|
|
|
// would have been nice if output.file supported this as well, only loaders seem to do so though
|
|
// const assetHash = 'sha512:hash:base64';
|
|
|
|
/*
|
|
* Base Webpack configuration
|
|
*/
|
|
const baseWebpackConfig = {
|
|
entry: [
|
|
'babel-polyfill',
|
|
'./src',
|
|
],
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.js$/i,
|
|
exclude: /node_modules/,
|
|
loader: 'babel-loader',
|
|
},
|
|
{
|
|
test: /\.s[ac]ss$/i,
|
|
use: ExtractTextPlugin.extract({
|
|
fallback: 'style-loader',
|
|
use: [
|
|
{
|
|
loader: 'css-loader',
|
|
options: { importLoaders: 1, minimize: !isDev },
|
|
},
|
|
{
|
|
loader: 'postcss-loader',
|
|
options: {
|
|
sourceMap: true,
|
|
plugins: [autoprefixer({ browsers: ['last 3 versions', '> 1%'] })],
|
|
},
|
|
},
|
|
{
|
|
loader: 'resolve-url-loader',
|
|
options: {
|
|
sourceMap: true,
|
|
fail: true,
|
|
silent: false,
|
|
},
|
|
},
|
|
{
|
|
loader: 'sass-loader',
|
|
options: { sourceMap: true },
|
|
},
|
|
],
|
|
}),
|
|
},
|
|
{
|
|
test: /\.css(?:\?.*)?$/i,
|
|
use: ExtractTextPlugin.extract({
|
|
fallback: 'style-loader',
|
|
use: [
|
|
{
|
|
loader: 'css-loader',
|
|
options: { importLoaders: true, minimize: !isDev },
|
|
},
|
|
{
|
|
loader: 'postcss-loader',
|
|
options: {
|
|
sourceMap: true,
|
|
plugins: [autoprefixer({ browsers: ['last 3 versions', '> 1%'] })],
|
|
},
|
|
},
|
|
],
|
|
}),
|
|
},
|
|
{
|
|
test: /\.json(?:\?.*)?$/,
|
|
loader: 'json-loader',
|
|
},
|
|
{
|
|
test: /\.(jpe?g|png|gif|tiff?|svg|ico)(?:\?.*)?$/i,
|
|
use: [
|
|
{
|
|
loader: 'file-loader',
|
|
options: {
|
|
name: assetOutputPath,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
test: /\.woff(?:\?.*)?$/,
|
|
use: {
|
|
loader: 'file-loader',
|
|
options: {
|
|
name: assetOutputPath,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
test: /\.woff2(?:\?.*)?$/,
|
|
use: {
|
|
loader: 'file-loader',
|
|
options: {
|
|
name: assetOutputPath,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
test: /\.ttf(?:\?.*)?$/,
|
|
use: {
|
|
loader: 'file-loader',
|
|
options: {
|
|
name: assetOutputPath,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
test: /\.otf(?:\?.*)?$/,
|
|
use: {
|
|
loader: 'file-loader',
|
|
options: {
|
|
name: assetOutputPath,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
test: /\.eot(?:\?.*)?$/,
|
|
use: {
|
|
loader: 'file-loader',
|
|
options: {
|
|
name: assetOutputPath,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
test: /\.html$/,
|
|
use: {
|
|
loader: 'html-loader',
|
|
options: {
|
|
interpolate: true,
|
|
minimize: !isDev,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
test: require.resolve('masonry-layout'),
|
|
loader: 'imports-loader?this=>window',
|
|
},
|
|
],
|
|
},
|
|
plugins: [
|
|
new webpack.NamedModulesPlugin(),
|
|
|
|
new webpack.ProvidePlugin({
|
|
$: 'jquery',
|
|
jQuery: 'jquery',
|
|
'window.$': 'jquery',
|
|
'window.jQuery': 'jquery',
|
|
}),
|
|
|
|
new webpack.optimize.OccurrenceOrderPlugin(),
|
|
|
|
new webpack.optimize.CommonsChunkPlugin({
|
|
name: 'vendor',
|
|
minChunks({ resource }) {
|
|
return resource && !(
|
|
resource.indexOf('.css') >= 0 ||
|
|
resource.indexOf('.less') >= 0 ||
|
|
resource.indexOf('.scss') >= 0 ||
|
|
resource.indexOf('.sass') >= 0
|
|
) && (
|
|
resource.indexOf('bower_components') >= 0 ||
|
|
resource.indexOf('node_modules') >= 0 ||
|
|
resource.indexOf('vendor') >= 0
|
|
);
|
|
},
|
|
}),
|
|
|
|
new webpack.DefinePlugin({
|
|
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
|
|
__DEV__: JSON.stringify(isDev),
|
|
}),
|
|
|
|
// Extract CSS stylesheets to files
|
|
new ExtractTextPlugin(`[name]-[${assetHash.replace(/hash/ig, 'contenthash')}].css`),
|
|
|
|
// Generate boilerplate HTML along side actual JS bundle
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/index.html',
|
|
filename: 'index.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/imprint.html',
|
|
filename: 'imprint.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/unternehmen.html',
|
|
filename: 'unternehmen.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/arztpraxen.html',
|
|
filename: 'arztpraxen.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/ueber.html',
|
|
filename: 'ueber.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/webshops.html',
|
|
filename: 'webshops.html',
|
|
}),
|
|
//Referenzen
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/gartenMoser.html',
|
|
filename: 'gartenMoser.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/ICPDeutschland.html',
|
|
filename: 'ICPDeutschland.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Spectra.html',
|
|
filename: 'Spectra.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Vinico.html',
|
|
filename: 'Vinico.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Sprintis.html',
|
|
filename: 'Sprintis.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Satema.html',
|
|
filename: 'Satema.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Soccerboots.html',
|
|
filename: 'Soccerboots.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Seipp.html',
|
|
filename: 'Seipp.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/RGS.html',
|
|
filename: 'RGS.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Moormann.html',
|
|
filename: 'Moormann.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Bergfreunde.html',
|
|
filename: 'Bergfreunde.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Kinderwunschpraxis.html',
|
|
filename: 'Kinderwunschpraxis.html',
|
|
}),
|
|
new ScriptExtHtmlWebpackPlugin({
|
|
defaultAttribute: 'defer',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Arztsoftware.html',
|
|
filename: 'Arztsoftware.html',
|
|
}),
|
|
|
|
//category
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/ecommerce.html',
|
|
filename: 'ecommerce.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/solfusion.html',
|
|
filename: 'solfusion.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/WebsitesUndCms.html',
|
|
filename: 'WebsitesUndCms.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/SoftwareEntwicklung.html',
|
|
filename: 'SoftwareEntwicklung.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Netzwerk.html',
|
|
filename: 'Netzwerk.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Warenwirtschaft.html',
|
|
filename: 'Warenwirtschaft.html',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/Virtualisierung.html',
|
|
filename: 'Virtualisierung.html',
|
|
}),
|
|
|
|
// Image optimization (only on production)
|
|
new ImageminWebpackPlugin({
|
|
disable: isDev,
|
|
gifsicle: {
|
|
interlaced: true,
|
|
},
|
|
mozjpeg: {
|
|
quality: 85,
|
|
progressive: true,
|
|
},
|
|
optipng: {
|
|
optimizationLevel: 7,
|
|
},
|
|
svgo: {
|
|
plugins: [
|
|
{
|
|
removeViewBox: false,
|
|
},
|
|
{
|
|
removeEmptyAttrs: false,
|
|
},
|
|
],
|
|
},
|
|
}),
|
|
],
|
|
resolve: {
|
|
alias: {
|
|
jquery: 'jquery/src/jquery',
|
|
'smooth-scroll': 'smooth-scroll/src/js/smooth-scroll.js',
|
|
},
|
|
enforceExtension: false,
|
|
extensions: [
|
|
'.js',
|
|
'.sass',
|
|
'.scss',
|
|
'.css',
|
|
],
|
|
},
|
|
resolveLoader: {
|
|
modules: [
|
|
'vendor', // Composer
|
|
'node_modules', // NPM/Yarn
|
|
'bower_components', // Bower
|
|
],
|
|
},
|
|
output: {
|
|
filename: assetOutputPath.replace(/\[ext\]/, 'js'),
|
|
chunkFilename: assetOutputPath.replace(/hash/ig, 'chunkhash').replace(/\[ext\]/, 'js'),
|
|
path: path.resolve(__dirname, 'dist'),
|
|
sourceMapFilename: '[file].map',
|
|
},
|
|
performance: {
|
|
assetFilter: filename => filename.endsWith('.js') || filename.endsWith('.css'),
|
|
},
|
|
devServer: {
|
|
lazy: false,
|
|
hot: true,
|
|
historyApiFallback: true,
|
|
host: '0.0.0.0',
|
|
contentBase: [
|
|
'src',
|
|
],
|
|
watchContentBase: true,
|
|
},
|
|
};
|
|
|
|
// Debug webpack config
|
|
const developmentWebpackConfig = {
|
|
devtool: '#inline-source-map',
|
|
performance: {
|
|
hints: false,
|
|
},
|
|
};
|
|
|
|
// Production webpack config
|
|
const productionWebpackConfig = {
|
|
plugins: [
|
|
new PurifyCSSWebpackPlugin({
|
|
styleExtensions: [
|
|
'.css',
|
|
'.less',
|
|
'.sass',
|
|
'.scss',
|
|
],
|
|
moduleExtensions: [
|
|
'.html',
|
|
'.js',
|
|
'.jsx',
|
|
],
|
|
paths: glob.sync([
|
|
path.join(__dirname, 'src', '**.js'),
|
|
path.join(__dirname, 'src', '**.jsx'),
|
|
path.join(__dirname, 'src', '**.html'),
|
|
path.join(__dirname, 'src', '**.css'),
|
|
path.join(__dirname, 'src', '**.sass'),
|
|
path.join(__dirname, 'src', '**.scss'),
|
|
path.join(__dirname, 'src', '**.less'),
|
|
]),
|
|
}),
|
|
new webpack.optimize.UglifyJsPlugin({
|
|
compress: {
|
|
warnings: false,
|
|
},
|
|
}),
|
|
],
|
|
performance: {
|
|
hints: 'warning',
|
|
},
|
|
};
|
|
|
|
module.exports = merge(baseWebpackConfig, isDev
|
|
? developmentWebpackConfig
|
|
: productionWebpackConfig);
|
|
|
|
process.traceDeprecation = true;
|