webpack.common.js

const path = require('path')
const {VueLoaderPlugin} = require('vue-loader')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

let watchOptions = {
	aggregateTimeout: 300,
	poll: 1000,
	ignored: ['node_modules'],
}

let rules = [
	{
		test: /\.txt$/,
		use: 'raw-loader',
	},
	{
		test: /\.vue$/,
		use: 'vue-loader',
	},
	{
		test: /\.m?js$/,
		exclude: /(node_modules)/,
		use: {
			loader: 'babel-loader',
			options: {
				presets: [
					[
						'@babel/preset-env',
						{
							'debug': true,
							corejs: 3,
							'useBuiltIns': 'entry',
							'targets': {
								'browsers': [
									'defaults',
								],
							},
						},
					],
				],
				plugins: [
					[
						'@babel/transform-runtime',
					],
				],
			},
		},
	},
	{
		test: /\.(sa|sc|c)ss$/,
		use: [
			'vue-style-loader',
			'style-loader',
			{
				loader: MiniCssExtractPlugin.loader,
				options: {
					esModule: false,
				},
			},
			'css-loader',
			'sass-loader'
		],
	},
	{
		test: /\.(png|jpe?g|gif|svg)$/,
		use: [
			{
				loader: 'file-loader',
				options: {
					outputPath: 'images'
				}
			}
		]
	},
	{
		test: /\.(woff|woff2|ttf|otf|eot)$/,
		use: [
			{
				loader: 'file-loader',
				options: {
					outputPath: 'webfonts'
				}
			}
		]
	},
]

let plugins = [
	new VueLoaderPlugin(),
	new MiniCssExtractPlugin({
		// filename: '[name].[chunkhash].css',
		// chunkFilename: '[id].[chunkhash].css',
		// insert: function (linkTag) {
		//     var preloadLinkTag = document.createElement('link')
		//     preloadLinkTag.rel = 'preload'
		//     preloadLinkTag.as = 'style'
		//     preloadLinkTag.href = linkTag.href
		//     document.head.appendChild(preloadLinkTag)
		//     document.head.appendChild(linkTag)
		// }
	}),
	new CleanWebpackPlugin(),
	new CompressionPlugin(),
	new BundleAnalyzerPlugin(),
]

module.exports = {
	watchOptions: watchOptions,
	entry: {
		front: './assets/js/index.js',
		admin: './assets/js/admin.js',
		adminVue: './assets/js/admin-vue.js',
	},
	output: {
		path: path.resolve(__dirname, 'assets/dist'),
		filename: '[name].js',
	},
	resolve: {
		alias: {
			'vue$': 'vue/dist/vue.esm.js',
		},
		extensions: ['*', '.js', '.vue', '.json'],
	},
	module: {
		rules: rules,
	},
	plugins: plugins,
}

webpack.dev.js

const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
	mode: 'development',
	devtool: 'inline-source-map',
})

webpack.prod.js

const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
	mode: 'production',
	devtool: 'source-map',
	optimization: {
		minimize: true,
	},
})