improve webpack config

webpack/webpack.examples.config.js

@@ -0,0 +1,215 @@
+import path from 'path'
+import webpack from 'webpack'
+import { VueLoaderPlugin } from 'vue-loader'
+import SvgStore from 'webpack-svgstore-plugin'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import ManifestPlugin from 'webpack-manifest-plugin'
+import ImageminWebpackPlugin from 'imagemin-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin'
+import { ifDev, ifProd, removeEmpty } from './utilities'
+import { rootPath, examplesSrcPath, examplesBuildPath } from './paths'
+
+export default {
+
+	mode: ifDev('development', 'production'),
+
+	entry: {
+		examples: removeEmpty([
+			ifDev('webpack-hot-middleware/client?reload=true'),
+			`${examplesSrcPath}/assets/sass/main.scss`,
+			`${examplesSrcPath}/main.js`,
+		]),
+	},
+
+	output: {
+		path: `${examplesBuildPath}/`,
+		filename: `assets/js/[name]${ifProd('.[hash]', '')}.js`,
+		chunkFilename: `assets/js/[name]${ifProd('.[chunkhash]', '')}.js`,
+		publicPath: '/',
+	},
+
+	resolve: {
+		extensions: ['.js', '.scss', '.vue'],
+		alias: {
+			vue$: 'vue/dist/vue.esm.js',
+			modernizr: path.resolve(rootPath, '../.modernizr'),
+			modules: path.resolve(rootPath, '../node_modules'),
+			images: `${examplesSrcPath}/assets/images`,
+			fonts: `${examplesSrcPath}/assets/fonts`,
+			variables: `${examplesSrcPath}/assets/sass/variables`,
+			settings: `${examplesSrcPath}/assets/sass/1-settings/index`,
+			utilityFunctions: `${examplesSrcPath}/assets/sass/2-utility-functions/index`,
+			tiptap: path.resolve(rootPath, '../src'),
+		},
+		modules: [
+			examplesSrcPath,
+			path.resolve(rootPath, '../node_modules'),
+		],
+	},
+
+	devtool: ifDev('eval-source-map', 'source-map'),
+
+	module: {
+		rules: [
+			{
+				test: /\.vue$/,
+				loader: 'vue-loader',
+			},
+			{
+				test: /\.js$/,
+				loader: ifDev('babel-loader?cacheDirectory=true', 'babel-loader'),
+				exclude: /node_modules(?!\/quill)/,
+			},
+			{
+				test: /\.(graphql|gql)$/,
+				loader: 'graphql-tag/loader',
+				exclude: /node_modules/,
+			},
+			{
+				test: /\.css$/,
+				use: removeEmpty([
+					ifDev('vue-style-loader', MiniCssExtractPlugin.loader),
+					'css-loader',
+					'postcss-loader',
+				]),
+			},
+			{
+				test: /\.scss$/,
+				use: removeEmpty([
+					ifDev('vue-style-loader', MiniCssExtractPlugin.loader),
+					'css-loader',
+					'postcss-loader',
+					'sass-loader',
+				]),
+			},
+			{
+				test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
+				use: {
+					loader: 'file-loader',
+					options: {
+						name: `assets/images/[name]${ifProd('.[hash]', '')}.[ext]`,
+					},
+				},
+			},
+			{
+				test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+				use: {
+					loader: 'file-loader',
+					options: {
+						name: `assets/fonts/[name]${ifProd('.[hash]', '')}.[ext]`,
+					},
+				},
+			},
+		],
+	},
+
+	// splitting out the vendor
+	optimization: {
+		namedModules: true,
+		splitChunks: {
+			name: 'vendor',
+			minChunks: 2,
+		},
+		noEmitOnErrors: true,
+		// concatenateModules: true,
+	},
+
+	plugins: removeEmpty([
+
+		// create manifest file for server-side asset manipulation
+		new ManifestPlugin({
+			fileName: 'assets/manifest.json',
+			writeToFileEmit: true,
+		}),
+
+		// define env
+		// new webpack.DefinePlugin({
+		// 	'process.env': {},
+		// }),
+
+		// copy static files
+		new CopyWebpackPlugin([
+			{
+				context: `${examplesSrcPath}/assets/static`,
+				from: { glob: '**/*', dot: false },
+				to: `${examplesBuildPath}/assets`,
+			},
+		]),
+
+		// enable hot reloading
+		ifDev(new webpack.HotModuleReplacementPlugin()),
+
+		// html
+		new HtmlWebpackPlugin({
+			filename: 'index.html',
+			template: `${examplesSrcPath}/index.html`,
+			inject: true,
+			minify: ifProd({
+				removeComments: true,
+				collapseWhitespace: true,
+				removeAttributeQuotes: true,
+			}),
+			buildVersion: new Date().valueOf(),
+			chunksSortMode: 'none',
+		}),
+
+		new VueLoaderPlugin(),
+
+		// create css files
+		ifProd(new MiniCssExtractPlugin({
+			filename: `assets/css/[name]${ifProd('.[hash]', '')}.css`,
+			chunkFilename: `assets/css/[name]${ifProd('.[hash]', '')}.css`,
+		})),
+
+		// minify css files
+		ifProd(new OptimizeCssAssetsPlugin({
+			cssProcessorOptions: {
+				reduceIdents: false,
+				autoprefixer: false,
+				zindex: false,
+				discardComments: {
+					removeAll: true,
+				},
+			},
+		})),
+
+		// svg icons
+		new SvgStore({
+			prefix: 'icon--',
+			svgoOptions: {
+				plugins: [
+					{ cleanupIDs: false },
+					{ collapseGroups: false },
+					{ removeTitle: true },
+				],
+			},
+		}),
+
+		// image optimization
+		new ImageminWebpackPlugin({
+			optipng: ifDev(null, {
+				optimizationLevel: 3,
+			}),
+			jpegtran: ifDev(null, {
+				progressive: true,
+				quality: 80,
+			}),
+			svgo: ifDev(null, {
+				plugins: [
+					{ cleanupIDs: false },
+					{ removeViewBox: false },
+					{ removeUselessStrokeAndFill: false },
+					{ removeEmptyAttrs: false },
+				],
+			}),
+		}),
+
+	]),
+
+	node: {
+		fs: 'empty',
+	},
+
+}