webpack.config.js - ctucx.things

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
import {fileURLToPath}      from 'url';
import path                 from 'path';
import webpack              from 'webpack';
import sass                 from 'sass';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import VueLoaderPlugin      from 'vue-loader/lib/plugin.js';

const __filename = fileURLToPath(import.meta.url);
const __dirname  = path.dirname(__filename);

export default {
	mode: 'production',
	entry: {
		app: [
			'./src/css/app.scss',
			'./src/app.js',
		],
		view: [
			'./src/css/view.scss',
			'./src/view.js',
		],
	},

	output: {
		path: path.resolve(__dirname, './public/dist'),
		publicPath: '/dist',
		filename: '[name].js',
	},

	module: {
		rules: [
			{
				test: /\.vue$/,
				loader: 'vue-loader',
			},
			{
				test: /\.scss$/,
				use: [
					{
						loader: MiniCssExtractPlugin.loader,
					},
					'css-loader',
					{
						loader: 'sass-loader',
						options: {
							implementation: sass,
						},
					},
				],
			},
		],
	},
	resolve: {
		alias: {
			vue$: 'vue/dist/vue.esm.js',
		},
	},
	performance: {
		hints: false,
	},
	devtool: false,
	plugins: [
		new VueLoaderPlugin(),
		new webpack.LoaderOptionsPlugin({
			minimize: true,
		}),
		new MiniCssExtractPlugin({
			filename: '[name].css',
		}),
	],
};