forked from AngelaRemolina/RunestoneComponents
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathwebpack.config.js
95 lines (92 loc) · 4.26 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
// ***************************************************************************************
// |docname| - Define the `webpack configuration <https://webpack.js.org/configuration/>`_
// ***************************************************************************************
// .. toctree::
// :caption: Related contents
//
// webpack.index.js
const path = require("path");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env, argv) => {
return {
entry: {
runestone: "./webpack.index.js",
},
// See `mode <https://webpack.js.org/configuration/mode/>`_ for the conditional statement below.
devtool: argv.mode === "development" ? "inline-source-map" : "source-map",
module: {
rules: [
{
test: /\.css$/i,
use: [argv.mode === "development" ? "style-loader" : MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
// For more information, see https://webpack.js.org/guides/asset-modules/.
type: "asset",
},
],
},
resolve: {
fallback: {
// ``sql.js`` wants these in case it's running under node.js. They're not needed by JS in the browser.
"crypto": false,
"fs": false,
"path": false
}
},
externals: {
// Use the jQuery that Sphinx provides for jQuery.ui. See `externals <https://webpack.js.org/configuration/externals/>`_.
jquery: "jQuery",
},
output: {
path: path.resolve(__dirname, "runestone/dist"),
// See https://webpack.js.org/guides/caching/. This provides a hash for dynamic imports as well, avoiding caching out-of-date JS.
filename: "[name].bundle.js?v=[contenthash]",
// Delete everything in the output directory on each build.
clean: true,
},
// See https://webpack.js.org/guides/code-splitting/#splitchunksplugin.
optimization: {
moduleIds: 'deterministic',
// Collect all the webpack import runtime into a single file, which is named ``runtime.bundle.js``. This must be statically imported by all pages containing Runestone components.
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
},
// CSS for production was copied from https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production.
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line.
`...`,
new CssMinimizerPlugin(),
],
},
plugins: [
// _`webpack_static_imports`: Instead of HTML, produce a list of static imports as JSON. Sphinx will then read this file and inject these imports when creating each page.
new HtmlWebpackPlugin({
filename: 'webpack_static_imports.json',
// Don't prepend the ``<head>`` tag and data to the output.
inject: false,
// The template to create JSON.
templateContent: ({ htmlWebpackPlugin }) => JSON.stringify({
js: htmlWebpackPlugin.files.js,
css: htmlWebpackPlugin.files.css,
}),
}),
new CopyPlugin({
patterns: [{
// sql.js support: this wasm file will be fetched dynamically when we initialize sql.js. It is important that we do not change its name, and that it is in the same folder as the js.
from: 'node_modules/sql.js/dist/sql-wasm.wasm',
to: '.'
}],
}),
new MiniCssExtractPlugin({
filename: '[name].css?v=[contenthash]',
chunkFilename: '[id].css',
}),
],
};
};