b13-rocket 0.5.0

package/src/webpack/webpack.config.base.js

@@ -0,0 +1,113 @@
+const
+	path = require('path'),
+	merge = require('webpack-merge'),
+	fs = require('fs');
+
+module.exports = (config, sitesConfigPath = sitesConfigPath, mode = 'development') => {
+
+	const webpackSiteBaseConfigPath = path.resolve(sitesConfigPath, 'webpack.config.base.js');
+	const webpackSiteBaseConfig = require(webpackSiteBaseConfigPath);
+
+	let babelPath = path.resolve(__dirname, './../../node_modules/@babel');
+
+	if (!fs.existsSync(babelPath)) {
+		babelPath = path.resolve(__dirname, './../../../../node_modules/@babel');
+	}
+
+	const webpackBaseConfig = merge.merge({
+		mode,
+		entry: [`${path.resolve(sitesConfigPath, config.js.path.source)}/${config.js.filename.main}.js`],
+		optimization: {
+			splitChunks: {
+				cacheGroups: {
+					commons: {
+						test: /[\\/]node_modules[\\/]/,
+						name: config.js.filename.commonVendor,
+						chunks: 'all',
+					},
+				},
+			},
+		},
+		module: {
+			rules: [
+				{
+					test: /\.(js|ts)$/,
+					exclude: /(node_modules)/,
+					use: [{
+						loader: 'babel-loader',
+						options: {
+							cacheCompression: false,
+							cacheDirectory: true,
+							presets: [
+								'@babel/preset-env',
+								'@babel/preset-typescript',
+							],
+							plugins: [
+								'@babel/plugin-transform-runtime',
+							],
+						},
+					}],
+				},
+				{
+					test: /\.vue$/,
+					use: [
+						'vue-loader',
+						'vue-svg-inline-loader',
+					],
+				},
+				{
+					test: /\.css$/,
+					use: [
+						'vue-style-loader',
+						{
+							loader: 'css-loader',
+							options: {
+								url: false,
+
+								// don't handle css @import
+								import: (url) => !url.includes('.css'),
+							},
+						},
+					],
+				},
+				{
+					test: /\.scss$/,
+					use: [
+						'vue-style-loader',
+						{
+							loader: 'css-loader',
+							options: {
+								url: false,
+							},
+						},
+						'sass-loader',
+					],
+				},
+				{
+					test: /\.(png|jpg|gif)$/,
+					use: [
+						{
+							loader: 'file-loader',
+							options: {
+								emitFile: config.js.emitImageFile || false,
+							},
+						},
+					],
+				},
+				{
+					test: /\.html$/i,
+					loader: 'html-loader',
+				},
+			],
+		},
+		resolve: {
+			symlinks: true,
+			alias: {
+				'@babel': babelPath,
+			},
+		},
+		plugins: [],
+	}, webpackSiteBaseConfig(config));
+
+	return webpackBaseConfig;
+};

package/src/webpack/webpack.config.js

@@ -0,0 +1,83 @@
+const
+	webpackBaseConfig = require('./webpack.config.base'),
+	path = require('path'),
+	merge = require('webpack-merge'),
+	{ VueLoaderPlugin } = require('vue-loader'),
+	CompressionPlugin = require('compression-webpack-plugin'),
+	WorkboxWebpackPlugin = require('workbox-webpack-plugin'),
+	webpack = require('webpack');
+
+export default function(config = {}, sitesConfigPath = __dirname, mode = 'production') {
+
+	// publicPath: 'auto' is working for all modern browsers
+	// https://webpack.js.org/guides/public-path/#automatic-publicpath
+	// IE8-11 requires a polyfill
+	let publicPath = 'auto';
+	if (config.js.path.public) {
+		publicPath = config.js.path.public;
+	}
+
+	const webpackConfig = merge.merge({
+		cache: {
+			type: 'filesystem',
+		},
+
+		output: {
+			filename: '[name].js',
+			chunkFilename: 'chunk.[contenthash].js',
+			library: {
+				name: config.js.filename.main,
+				type: 'umd',
+			},
+			umdNamedDefine: false,
+			path: path.resolve(sitesConfigPath, config.js.path.target),
+			publicPath,
+		},
+
+		plugins: [
+			new VueLoaderPlugin(),
+			new webpack.DefinePlugin({
+				B13_HMR_ENABLED: JSON.stringify(false),
+			}),
+		],
+	}, webpackBaseConfig(config, sitesConfigPath, mode));
+
+
+	// add workbox webpack plugin manifest injection if service worker is enabled
+	// this will add all build files to the service worker pre-cache
+	if (config.sw) {
+		webpackConfig.plugins.push(
+			new WorkboxWebpackPlugin.InjectManifest({
+				swSrc: `${path.resolve(sitesConfigPath, config.sw.path.source)}/${config.sw.filename.main}.js`,
+				swDest: `${config.sw.filename.main}.js`,
+			}),
+		);
+	}
+
+	// bundle analyzer bundle?
+	if (config.bundleAnalyzer) {
+		const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+		webpackConfig.plugins.push(new BundleAnalyzerPlugin());
+	}
+
+	// run vue.js in production mode
+	if (mode === 'production') {
+		webpackConfig.resolve.alias.vue = path.resolve(sitesConfigPath, './../node_modules/vue/dist/vue.min');
+		webpackConfig.plugins.push(
+			new CompressionPlugin({
+				filename: '[path][base].gz',
+				algorithm: 'gzip',
+				test: /\.js$|\.css$/,
+				minRatio: 0.7,
+			}),
+			new CompressionPlugin({
+				filename: '[path][base].br',
+				algorithm: 'brotliCompress',
+				test: /\.js$|\.css$/,
+				minRatio: 0.7,
+			}),
+		);
+	}
+
+	return webpackConfig;
+}