forked from zulip/zulip
-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.ts
186 lines (182 loc) · 7.09 KB
/
webpack.config.ts
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
import { resolve } from 'path';
import * as BundleTracker from 'webpack-bundle-tracker';
import * as webpack from 'webpack';
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const assets = require('./webpack.assets.json');
// Adds on css-hot-loader in dev mode
function getHotCSS(bundle:any[], isProd:boolean) {
if(isProd) {
return bundle;
}
return [
'css-hot-loader',
].concat(bundle);
}
export default (env?: string) : webpack.Configuration => {
const production: boolean = env === "production";
let config: webpack.Configuration = {
mode: production ? "production" : "development",
context: resolve(__dirname, "../"),
entry: assets,
module: {
rules: [
// Run the typescript compilier on .ts files before webpack
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
configFile: require.resolve('../static/ts/tsconfig.json')
}
},
// Uses script-loader on minified files so we don't change global variables in them.
// Also has the effect of making processing these files fast
// Currently the source maps don't work with these so use unminified files
// if debugging is required.
{
test: /(min|zxcvbn)\.js/,
use: [ 'script-loader' ],
},
// Expose Global variables to webpack
// Use the unminified versions of jquery and underscore so that
// Good error messages show up in production and development in the source maps
{
test: require.resolve('../static/node_modules/jquery/dist/jquery.js'),
use: [
{loader: 'expose-loader', options: '$'},
{loader: 'expose-loader', options: 'jQuery'},
],
},
{
test: require.resolve('../node_modules/underscore/underscore.js'),
use: [
{loader: 'expose-loader', options: '_'},
],
},
{
test: require.resolve('../static/js/debug.js'),
use: [
{loader: 'expose-loader', options: 'debug'},
],
},
{
test: require.resolve('../static/js/blueslip.js'),
use: [
{loader: 'expose-loader', options: 'blueslip'},
],
},
{
test: require.resolve('../static/js/common.js'),
use: [
{loader: 'expose-loader', options: 'common'},
],
},
// regular css files
{
test: /\.css$/,
use: getHotCSS([
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
], production),
},
// sass / scss loader
{
test: /\.(sass|scss)$/,
use: getHotCSS([
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
], production),
},
// load fonts and files
{
test: /\.(woff(2)?|ttf|eot|svg|otf|png)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'files/'
}
}]
}
],
},
output: {
path: resolve(__dirname, '../static/webpack-bundles'),
filename: production ? '[name]-[hash].js' : '[name].js',
},
resolve: {
extensions: [".tsx", ".ts", ".js", ".json", ".scss", ".css"],
},
// We prefer cheap-module-eval-source-map over eval because
// currently eval has trouble setting breakpoints per line
// in Google Chrome. There's almost no difference
// between the compilation time for the two and could be
// re-evaluated as the size of files grows
devtool: production ? 'source-map' : 'cheap-module-eval-source-map',
};
if (production) {
config.plugins = [
new BundleTracker({filename: 'webpack-stats-production.json'}),
// Extract CSS from files
new MiniCssExtractPlugin({
filename: (data) => {
// This is a special case in order to produce
// a static CSS file to be consumed by
// static/html/5xx.html
if(data.chunk.name === 'error-styles') {
return 'error-styles.css';
}
return '[name].[contenthash].css';
},
chunkFilename: "[id].css"
})
];
} else {
// Out JS debugging tools
config.entry['common'].push('./static/js/debug.js');
config.output.publicPath = '/webpack/';
config.plugins = [
new BundleTracker({filename: 'var/webpack-stats-dev.json'}),
// Better logging from console for hot reload
new webpack.NamedModulesPlugin(),
// script-loader should load sourceURL in dev
new webpack.LoaderOptionsPlugin({debug: true}),
// Extract CSS from files
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
// We use SourceMapDevToolPlugin in order to enable SourceMaps
// in combination with mini-css-extract-plugin and
// the devtool setting of cheap-module-eval-source-map.
// Without this plugin source maps won't work with that combo.
// See https://github.com/webpack-contrib/mini-css-extract-plugin/issues/29
new webpack.SourceMapDevToolPlugin({
filename: "[file].map"
})
];
config.devServer = {
clientLogLevel: "error",
stats: "errors-only",
watchOptions: {
poll: 100
}
};
}
return config;
};