-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
112 lines (105 loc) · 2.09 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
var path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
// Change these variables to fit your project.
const outputPath = './assets';
const entryPoints = {
admin: ['./src/scss/admin.scss'],
//admin: ['./src/js/admin.js', './src/scss/admin.scss'],
//frontend: ['./src/js/frontend.js','./src/scss/frontend.scss']
//frontend: ['./src/js/frontend.js']
};
// Rules.
const rules = [
{
test: /\.scss$/i,
use: [
MiniCssExtractPlugin.loader,
{loader: 'css-loader', options: {url: true, sourceMap: true}},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
browsers: 'defaults'
},
],
],
},
},
},
'sass-loader',
]
},
{
test: /\.(jpg|jpeg|png|gif|woff|woff2|eot|ttf|svg)$/i,
type: 'asset/resource',
generator: {
filename: '../img/[name][ext]',
publicPath: 'img/',
outputPath: 'img/',
},
},
{
exclude: /node_modules/,
test: /\.jsx?$/,
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"]
}
}
];
// Development.
const devConfig = {
entry: entryPoints,
output: {
publicPath: 'auto',
path: path.resolve(__dirname, outputPath),
filename: 'js/[name].js',
chunkFilename: 'js/modules/dev/[name].js',
},
plugins: [
new RemoveEmptyScriptsPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
],
module: {
rules: rules
},
devtool: 'eval-source-map',
};
// Production.
const prodConfig = {
entry: entryPoints,
output: {
publicPath: 'auto',
path: path.resolve( __dirname, outputPath ),
filename: 'js/[name].min.js',
chunkFilename: 'js/modules/[name].js',
},
plugins: [
new RemoveEmptyScriptsPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].min.css',
}),
],
module: {
rules: rules
},
optimization: {
chunkIds: 'named',
},
};
// Exports.
module.exports = (env, argv) => {
switch (argv.mode) {
case 'production':
return prodConfig;
default:
return devConfig;
}
}