Skip to content

Commit 2cde387

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Adding webpack configs
1 parent 862ed65 commit 2cde387

File tree

3 files changed

+353
-0
lines changed

3 files changed

+353
-0
lines changed

‎build/webpack.base.config.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
const path = require('path');
2+
const { VueLoaderPlugin } = require('vue-loader');
3+
const webpack = require('webpack');
4+
const packageJson = require('../package.json');
5+
6+
/*
7+
|--------------------------------------------------------------------------
8+
| Banner
9+
|--------------------------------------------------------------------------
10+
*/
11+
const banner = `Vuetify Resize Drawer
12+
13+
@name ${packageJson.name}
14+
@version ${packageJson.version}
15+
@description ${packageJson.description}
16+
@author ${packageJson.author}
17+
@copyright Copyright ${new Date().getFullYear()}, WebDevNerdStuff
18+
@homepage ${packageJson.homepage}
19+
@repository ${packageJson.repository}
20+
@license https://github.com/webdevnerdstuff/vuetify-resize-drawer/blob/main/LICENSE.md
21+
@supports Magical Creatures`;
22+
23+
/*
24+
|--------------------------------------------------------------------------
25+
| Vue Rule
26+
|--------------------------------------------------------------------------
27+
*/
28+
const vueRule = {
29+
test: /\.vue$/,
30+
loader: 'vue-loader',
31+
exclude: /node_modules/,
32+
};
33+
34+
/*
35+
|--------------------------------------------------------------------------
36+
| JavaScript Rule
37+
|--------------------------------------------------------------------------
38+
*/
39+
const jsRule = {
40+
test: /\.js$/,
41+
use: {
42+
loader: 'babel-loader',
43+
options: {
44+
presets: ['@babel/preset-env'],
45+
},
46+
},
47+
exclude: /node_modules/,
48+
};
49+
50+
module.exports = {
51+
mode: 'production',
52+
entry: path.resolve(__dirname, '../src/index.js'),
53+
output: {
54+
library: 'vuetify-resize-drawer',
55+
libraryTarget: 'umd',
56+
path: path.resolve(__dirname, '../dist'),
57+
publicPath: '/dist/',
58+
},
59+
// Resolve done //
60+
resolve: {
61+
extensions: ['.js', '.vue'],
62+
alias: {
63+
'@': path.join(__dirname, '/src'),
64+
'@assets': path.join(__dirname, '/src/assets'),
65+
'@components': path.join(__dirname, '/src/components'),
66+
'@docs': path.join(__dirname, '/src/docs'),
67+
'@plugins': path.join(__dirname, '/src/plugins'),
68+
},
69+
},
70+
module: {
71+
rules: [
72+
vueRule,
73+
jsRule,
74+
],
75+
},
76+
plugins: [
77+
new webpack.BannerPlugin({
78+
banner,
79+
}),
80+
new VueLoaderPlugin(),
81+
],
82+
infrastructureLogging: {
83+
level: 'none',
84+
},
85+
};

‎build/webpack.dev.config.js‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
const { merge } = require('webpack-merge');
2+
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
3+
const ESLintPlugin = require('eslint-webpack-plugin');
4+
const HtmlWebpackPlugin = require('html-webpack-plugin');
5+
const StylelintPlugin = require('stylelint-webpack-plugin');
6+
const TerserPlugin = require('terser-webpack-plugin');
7+
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
8+
const path = require('path');
9+
const sass = require('sass');
10+
const base = require('./webpack.base.config');
11+
const packageJson = require('../package.json');
12+
13+
const devServerPort = 8080;
14+
15+
/*
16+
|--------------------------------------------------------------------------
17+
| Eslint Options
18+
|--------------------------------------------------------------------------
19+
*/
20+
const eslintOptions = {
21+
extensions: ['js', 'vue'],
22+
exclude: [
23+
'./node_modules/**/*',
24+
'./vendor/**/*',
25+
'./assets/**/*',
26+
],
27+
emitWarning: true,
28+
fix: true,
29+
};
30+
31+
/*
32+
|--------------------------------------------------------------------------
33+
| SCSS Configs
34+
|--------------------------------------------------------------------------
35+
*/
36+
const scssRule = {
37+
rules: [
38+
{
39+
test: /\.s(c|a)ss$/,
40+
use: [
41+
'vue-style-loader',
42+
'css-loader',
43+
{
44+
loader: 'sass-loader',
45+
options: {
46+
implementation: sass,
47+
},
48+
},
49+
],
50+
},
51+
],
52+
};
53+
54+
/*
55+
|--------------------------------------------------------------------------
56+
| File Configs
57+
|--------------------------------------------------------------------------
58+
*/
59+
const fileRule = {
60+
rules: [
61+
{
62+
test: /\.(png|jpe?g|gif)$/i,
63+
use: [
64+
{
65+
loader: 'file-loader',
66+
options: {
67+
outputPath: 'images',
68+
esModule: false,
69+
name: '[name].[ext]',
70+
},
71+
},
72+
],
73+
},
74+
],
75+
};
76+
77+
/*
78+
|--------------------------------------------------------------------------
79+
| SVG Inline Loader Configs
80+
|--------------------------------------------------------------------------
81+
*/
82+
const svgRule = {
83+
rules: [
84+
{
85+
test: /\.svg$/,
86+
loader: 'svg-inline-loader',
87+
},
88+
],
89+
};
90+
91+
/*
92+
|--------------------------------------------------------------------------
93+
| Stylelint Options
94+
|--------------------------------------------------------------------------
95+
*/
96+
const stylelintOptions = {
97+
ignoreFiles: [
98+
'./node_modules/**/*.vue',
99+
],
100+
customSyntax: 'postcss-html',
101+
files: ['./src/docs/**/*.vue'],
102+
fix: true,
103+
};
104+
105+
/*
106+
|--------------------------------------------------------------------------
107+
| BrowserSyncPlugin Options
108+
|--------------------------------------------------------------------------
109+
*/
110+
const browserSyncOptions = {
111+
host: 'localhost',
112+
logLevel: 'silent',
113+
notify: false,
114+
open: true,
115+
port: devServerPort,
116+
proxy: `localhost:${devServerPort}`,
117+
ui: false,
118+
watch: true,
119+
snippetOptions: {
120+
rule: {
121+
match: /<\/head>/u,
122+
fn(snippet, match) {
123+
const { groups: { src } } = /src='(?<src>[^']+)'/u.exec(snippet);
124+
125+
return `<script src="${src}" async></script>${match}`;
126+
},
127+
},
128+
},
129+
};
130+
131+
/*
132+
|--------------------------------------------------------------------------
133+
| HtmlWebpackPlugin Options
134+
|--------------------------------------------------------------------------
135+
*/
136+
const packageTitle = 'Vuetify Resize Drawer';
137+
138+
const htmlWebpackOptions = {
139+
inject: 'body',
140+
template: './templates/index.html',
141+
title: packageTitle,
142+
minify: true,
143+
hash: true,
144+
meta: {
145+
// meta //
146+
base: 'https://webdevnerdstuff.github.io/vuetify-resize-drawer/',
147+
charset: 'utf-8',
148+
viewport: 'width=device-width, initial-scale=1',
149+
keywords: packageJson.keywords.join(', '),
150+
description: packageJson.description,
151+
author: packageJson.author,
152+
robots: 'index, follow',
153+
googlebot: 'index, follow',
154+
rating: 'General',
155+
'theme-color': '#21252a',
156+
// Facebook Social //
157+
'og:type': 'website',
158+
'og:title': packageTitle,
159+
'og:image': 'https://webdevnerdstuff.github.io/vuetify-resize-drawer/images/vuetify-resize-drawer-social.jpg',
160+
'og:image:alt': packageJson.description,
161+
'og:image:width': '1200',
162+
'og:image:height': '630',
163+
'og:description': packageJson.description,
164+
'og:site_name': packageTitle,
165+
'og:locale': 'en_US',
166+
},
167+
};
168+
169+
/*
170+
|--------------------------------------------------------------------------
171+
| Plugins
172+
|--------------------------------------------------------------------------
173+
*/
174+
const plugins = [
175+
new BrowserSyncPlugin(browserSyncOptions),
176+
new ESLintPlugin(eslintOptions),
177+
new HtmlWebpackPlugin(htmlWebpackOptions),
178+
new StylelintPlugin(stylelintOptions),
179+
new VuetifyLoaderPlugin(),
180+
];
181+
182+
module.exports = merge(base, {
183+
mode: 'development',
184+
entry: path.resolve(__dirname, '../src/main.js'),
185+
output: {
186+
clean: true,
187+
filename: 'vuetify-resize-drawer.js',
188+
path: path.resolve(__dirname, '../docs'),
189+
publicPath: '',
190+
},
191+
optimization: {
192+
minimize: true,
193+
minimizer: [
194+
new TerserPlugin({
195+
terserOptions: {
196+
format: {
197+
comments: false,
198+
},
199+
},
200+
extractComments: false,
201+
}),
202+
],
203+
},
204+
context: path.join(__dirname, '../src'),
205+
devServer: {
206+
client: {
207+
overlay: {
208+
errors: true,
209+
warnings: false,
210+
},
211+
},
212+
compress: true,
213+
devMiddleware: {
214+
publicPath: '/docs',
215+
serverSideRender: true,
216+
writeToDisk: true,
217+
},
218+
hot: false,
219+
static: path.join(__dirname, '../docs'),
220+
},
221+
devtool: 'inline-source-map',
222+
module: {
223+
rules: [
224+
fileRule,
225+
scssRule,
226+
svgRule,
227+
],
228+
},
229+
plugins,
230+
stats: {
231+
assets: false,
232+
builtAt: true,
233+
chunkGroups: false,
234+
chunkModules: false,
235+
chunkOrigins: false,
236+
chunks: false,
237+
colors: true,
238+
entrypoints: false,
239+
errorDetails: true,
240+
errors: true,
241+
hash: false,
242+
modules: false,
243+
moduleTrace: false,
244+
performance: true,
245+
publicPath: false,
246+
usedExports: false,
247+
version: false,
248+
warnings: true,
249+
},
250+
});

‎build/webpack.release.config.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const { merge } = require('webpack-merge');
2+
const TerserPlugin = require('terser-webpack-plugin');
3+
const base = require('./webpack.base.config');
4+
5+
module.exports = merge(base, {
6+
mode: 'production',
7+
optimization: {
8+
minimize: true,
9+
minimizer: [
10+
new TerserPlugin({
11+
extractComments: false,
12+
}),
13+
],
14+
},
15+
output: {
16+
filename: 'vuetify-resize-drawer.js',
17+
},
18+
});

0 commit comments

Comments
 (0)