-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
92 lines (89 loc) · 2.9 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
// Adapted from: https://github.com/fable-compiler/webpack-config-template
const CONFIG = {
indexHtmlTemplate: './src/index.html',
fsharpEntry: './src/App/App.fsproj',
cssEntry: './src/scss/main.scss',
outputDir: './output',
assetsDir: './public',
babel: {
presets: [
["@babel/preset-env", {
"modules": false,
"useBuiltIns": "usage",
// This saves around 4KB in minified bundle (not gzipped)
// "loose": true,
}]
],
}
}
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WorkboxPlugin = require('workbox-webpack-plugin');
module.exports = {
// If you only need to support modern browsers, you can remove @babel/polyfill
entry: {
app: ["@babel/polyfill", CONFIG.fsharpEntry, CONFIG.cssEntry]
},
output: {
path: path.join(__dirname, CONFIG.outputDir),
filename: '[name].js'
},
devtool: "source-map",
externals: {
"react": "var React",
"react-dom": "var ReactDOM",
},
// - HtmlWebpackPlugin: Allows us to use a template for the index.html page
// and automatically injects <script> or <link> tags for generated bundles.
// - MiniCssExtractPlugin: Extracts CSS from bundle to a different file
// - CopyWebpackPlugin: Copies static assets to output directory
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: CONFIG.indexHtmlTemplate
}),
new MiniCssExtractPlugin({
filename: 'style.css'
}),
new CopyWebpackPlugin([{
from: CONFIG.assetsDir,
}], {
// This is necessary so WorkboxPlugin includes assets in watch compilations
copyUnmodified: true
}),
],
// - fable-loader: transforms F# into JS
// - babel-loader: transforms JS to old syntax (compatible with old browsers)
// - sass-loaders: transforms SASS/SCSS into JS
module: {
rules: [
{
test: /\.fs(x|proj)?$/,
use: "fable-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: CONFIG.babel
},
},
{
test: /\.(sass|scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require("dart-sass")
}
}
],
}
]
}
};