-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
116 lines (113 loc) · 3.5 KB
/
webpack.config.js
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const KssWebpackPlugin = require('kss-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
/* filename of generated files */
const filename = 'phx-design-system';
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: false,
parallel: true,
sourceMap: true,
extractComments: true,
}),
new OptimizeCSSAssetsPlugin({}),
],
},
output: {
filename: `${filename}.js`,
path: path.resolve(__dirname, 'dist/'),
publicPath: '/',
},
module: {
rules: [
{
test: /\.(scss|css)/,
use: [
{loader: 'css-hot-loader'},
MiniCssExtractPlugin.loader,
{loader: 'css-loader'},
{loader: 'postcss-loader'},
{loader: 'sass-loader'},
],
}, {
test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)/,
dependency: { not: ['url'] },
loader: 'url-loader',
}, {
test: /\.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
type: 'asset/resource',
generator: {
filename: 'fonts/[name].[ext]',
},
}, {
test: /\.(svg|png|jpg|gif)$/,
type: 'asset/resource',
generator: {
filename: 'imgs/[name].[ext]',
},
},
],
},
plugins: [
new CleanWebpackPlugin(),
new CopyPlugin({'patterns': [{
from: 'node_modules/@phoenixreisen/mithrils/src/footer/icons/',
to: 'template/kss-assets/footer-icons/'
}, {
from: './netlify.toml',
to: './netlify.toml'
}, {
from: './src/images/',
to: './imgs/'
}]}),
new MiniCssExtractPlugin({
filename: `${filename}.css`,
chunkFilename: `${filename}.[id].css`,
}),
new KssWebpackPlugin({
"source": "./src",
"destination": "./dist",
"builder": "./template/",
"js": [`./${filename}.js`],
"css": [`./${filename}.css`],
"title": "Phoenix Reisen Styleguide",
}),
new StyleLintPlugin({
quiet: false,
failOnError: false,
context: './src',
}),
],
/**
* Dev Mode Stuff
*/
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
// "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
// "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
},
watchFiles: {
paths: [
'src/**/*.js',
'src/**/*.scss',
'template/**/*',
],
options: {
usePolling: true,
},
},
hot: true,
port: 3027,
compress: true,
static: './dist',
},
devtool: 'hidden-source-map'
};