-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.prod.js
143 lines (133 loc) · 2.88 KB
/
webpack.config.prod.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
142
143
const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
const StyleLintPlugin = require("stylelint-webpack-plugin");
const DIST_DIR = "./dist";
module.exports = {
context: path.resolve(__dirname, "./src"),
resolve: {
extensions: [".jsx", ".js"]
},
// webpack entry points
entry: {
app: "./entry.js",
three: ["./libs/three/CanvasRenderer.js", "./libs/three/Projector.js", "./libs/three/bespoke-particles.js"]
},
// webpack output
output: {
filename: "scripts/[name]-[hash:5].js",
path: path.resolve(__dirname, DIST_DIR)
},
// Plugin definitions
plugins: [
// Optimisation plugins
new webpack.optimize.OccurrenceOrderPlugin(),
new UglifyJSPlugin(),
// Extract CSS to its own file
new ExtractTextPlugin("styles-[contenthash:5].css"),
// Create HTML file
new HtmlWebpackPlugin({
template: "./index.html",
inject: false
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: "defer"
}),
// Enable stylelint
new StyleLintPlugin({
syntax: "scss",
failOnError: true
})
],
// Loaders
module: {
rules: [
{
// ESLint
enforce: "pre",
test: /\.(js|jsx)$/,
exclude: [/node_modules/, /libs/, /sw.js/, /libs\/workbox/],
loader: "eslint-loader",
options: {
failOnError: true
}
},
{
// JS, using Babel
test: /\.(js|jsx)$/,
exclude: [/node_modules/, /sw.js/, /libs\/workbox/],
loader: "babel-loader",
options: {
presets: ["env"]
}
},
{
// CSS
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "postcss-loader", "sass-loader"]
})
},
{
// Fonts
test: /\.(woff|woff2)$/,
loader: "file-loader",
options: {
name: "fonts/[name].[ext]"
}
},
{
// Audio files
test: /\.mp3$/,
loader: "file-loader",
options: {
name: "audio/[name].[ext]"
}
},
{
// Images
test: /\.(png|jpg|gif|svg)$/,
use: [
"file-loader?name=[path][name].[ext]",
{
loader: "img-loader",
options: {
gifsicle: {
interlaced: false
},
mozjpeg: {
quality: 85,
progressive: true
},
optipng: true,
pngquant: {
floyd: 0.5,
speed: 2
},
svgo: {
plugins: [{removeTitle: true}, {convertPathData: false}]
}
}
}
]
},
{
// Favicon & Service worker files
test: [/\.ico$/, /sw.js/, /workbox-sw.prod.v2.1.2.js/, /manifest.json/],
use: [
{
loader: "file-loader",
options: {
name: "[path][name].[ext]",
publicPath: "/"
}
}
]
}
]
}
};