-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
141 lines (136 loc) · 3.62 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
const HtmlWebpackPlugin = require("html-webpack-plugin"); // Require html-webpack-plugin plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const clientConfig = {
entry: __dirname + "/src/js/index.js", // webpack entry point. Module to start building dependency graph
mode: "development",
output: {
path: __dirname + "/dist", // Folder to store generated bundle
filename: "bundle.js", // Name of generated bundle after build
publicPath: "/", // public URL of the output directory when referenced in a browser
},
module: {
// where we defined file patterns and their loaders
rules: [
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true },
},
],
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
// Apply rule for .sass, .scss or .css files
test: /\.(sa|sc|c)ss$/,
// Set loaders to transform files.
// Loaders are applying from right to left(!)
// The first loader will be applied after others
use: [
{
// After all CSS loaders we use plugin to do his work.
// It gets all transformed CSS and extracts it into separate
// single bundled file
loader: MiniCssExtractPlugin.loader,
},
{
// This loader resolves url() and @imports inside CSS
loader: "css-loader",
},
{
// Then we apply postCSS fixes like autoprefixer and minifying
loader: "postcss-loader",
options: {
options: {},
},
},
{
// First we transform SASS to standard CSS
loader: "sass-loader",
options: {
implementation: require("sass"),
},
},
],
},
{
// Now we apply rule for images
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
// Using file-loader for these files
loader: "file-loader",
// In options we can set different things like format
// and directory to save
options: {
outputPath: "images",
},
},
],
},
{
// Apply rule for fonts files
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
// Using file-loader too
loader: "file-loader",
options: {
outputPath: "fonts",
},
},
],
},
],
},
plugins: [
// Array of plugins to apply to build chunk
new HtmlWebpackPlugin({
template: __dirname + "/src/index.html",
filename: "./index.html",
}),
new MiniCssExtractPlugin({
filename: "style.css",
}),
],
devServer: {
// configuration for webpack-dev-server
contentBase: "./dist", //source of static assets
port: 6600, // port to run dev-server
},
};
const serverConfig = {
entry: "./server/server.js",
target: "node",
mode: "production",
output: {
path: __dirname + '/dist',
filename: "server.js",
libraryTarget: "commonjs2",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
};
module.exports = [clientConfig, serverConfig];