diff options
Diffstat (limited to 'language-web/webpack.config.js')
-rw-r--r-- | language-web/webpack.config.js | 135 |
1 files changed, 84 insertions, 51 deletions
diff --git a/language-web/webpack.config.js b/language-web/webpack.config.js index ae2f2386..1bd0edb2 100644 --- a/language-web/webpack.config.js +++ b/language-web/webpack.config.js | |||
@@ -1,8 +1,8 @@ | |||
1 | const fs = require('fs'); | 1 | const fs = require('fs'); |
2 | const path = require('path'); | 2 | const path = require('path'); |
3 | 3 | ||
4 | const WebpackBeforeBuildPlugin = require('before-build-webpack'); | ||
5 | const HtmlWebpackPlugin = require('html-webpack-plugin'); | 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); |
5 | const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload'); | ||
6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | 6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
7 | const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity'); | 7 | const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity'); |
8 | 8 | ||
@@ -37,6 +37,15 @@ const babelPresets = [ | |||
37 | ], | 37 | ], |
38 | '@babel/preset-react', | 38 | '@babel/preset-react', |
39 | ]; | 39 | ]; |
40 | const babelPlugins = [ | ||
41 | '@babel/plugin-transform-runtime', | ||
42 | ] | ||
43 | const magicCommentsLoader = { | ||
44 | loader: 'magic-comments-loader', | ||
45 | options: { | ||
46 | webpackChunkName: true, | ||
47 | } | ||
48 | }; | ||
40 | 49 | ||
41 | module.exports = { | 50 | module.exports = { |
42 | mode: devMode ? 'development' : 'production', | 51 | mode: devMode ? 'development' : 'production', |
@@ -44,8 +53,10 @@ module.exports = { | |||
44 | output: { | 53 | output: { |
45 | path: outputPath, | 54 | path: outputPath, |
46 | publicPath: '/', | 55 | publicPath: '/', |
47 | filename: devMode ? '[name].js' : '[contenthash].js', | 56 | filename: devMode ? '[name].js' : '[name].[contenthash].js', |
48 | chunkFilename: devMode ? '[id].js' : '[contenthash].js', | 57 | chunkFilename: devMode ? '[name].js' : '[name].[contenthash].js', |
58 | assetModuleFilename: devMode ? '[name].js' : '[name].[contenthash][ext]', | ||
59 | clean: true, | ||
49 | crossOriginLoading: 'anonymous', | 60 | crossOriginLoading: 'anonymous', |
50 | }, | 61 | }, |
51 | module: { | 62 | module: { |
@@ -53,41 +64,53 @@ module.exports = { | |||
53 | { | 64 | { |
54 | test: /\.jsx?$/i, | 65 | test: /\.jsx?$/i, |
55 | ...babelLoaderFilters, | 66 | ...babelLoaderFilters, |
56 | loader: 'babel-loader', | 67 | use: [ |
57 | options: { | 68 | { |
58 | presets: babelPresets, | 69 | loader: 'babel-loader', |
59 | plugins: [ | 70 | options: { |
60 | [ | 71 | presets: babelPresets, |
61 | '@babel/plugin-proposal-class-properties', | 72 | plugins: [ |
62 | { | 73 | [ |
63 | loose: false, | 74 | '@babel/plugin-proposal-class-properties', |
75 | { | ||
76 | loose: false, | ||
77 | }, | ||
78 | ...babelPlugins, | ||
79 | ], | ||
80 | ], | ||
81 | assumptions: { | ||
82 | 'setPublicClassFields': false, | ||
64 | }, | 83 | }, |
65 | ], | 84 | }, |
66 | ], | ||
67 | assumptions: { | ||
68 | 'setPublicClassFields': false, | ||
69 | }, | 85 | }, |
70 | }, | 86 | magicCommentsLoader, |
87 | ], | ||
71 | }, | 88 | }, |
72 | { | 89 | { |
73 | test: /.tsx?$/i, | 90 | test: /.tsx?$/i, |
74 | ...babelLoaderFilters, | 91 | ...babelLoaderFilters, |
75 | loader: 'babel-loader', | 92 | use: [ |
76 | options: { | 93 | { |
77 | presets: [ | 94 | loader: 'babel-loader', |
78 | ...babelPresets, | 95 | options: { |
79 | [ | 96 | presets: [ |
80 | '@babel/preset-typescript', | 97 | ...babelPresets, |
81 | { | 98 | [ |
82 | isTSX: true, | 99 | '@babel/preset-typescript', |
83 | allExtensions: true, | 100 | { |
84 | allowDeclareFields: true, | 101 | isTSX: true, |
85 | onlyRemoveTypeImports: true, | 102 | allExtensions: true, |
86 | optimizeConstEnums: true, | 103 | allowDeclareFields: true, |
87 | }, | 104 | onlyRemoveTypeImports: true, |
88 | ] | 105 | optimizeConstEnums: true, |
89 | ], | 106 | }, |
90 | }, | 107 | ] |
108 | ], | ||
109 | plugins: babelPlugins, | ||
110 | }, | ||
111 | }, | ||
112 | magicCommentsLoader, | ||
113 | ], | ||
91 | }, | 114 | }, |
92 | { | 115 | { |
93 | test: /\.scss$/i, | 116 | test: /\.scss$/i, |
@@ -133,8 +156,23 @@ module.exports = { | |||
133 | }, | 156 | }, |
134 | devtool: devMode ? 'inline-source-map' : 'source-map', | 157 | devtool: devMode ? 'inline-source-map' : 'source-map', |
135 | optimization: { | 158 | optimization: { |
159 | providedExports: !devMode, | ||
160 | sideEffects: devMode ? 'flag' : true, | ||
136 | splitChunks: { | 161 | splitChunks: { |
137 | chunks: 'all', | 162 | chunks: 'all', |
163 | cacheGroups: { | ||
164 | defaultVendors: { | ||
165 | test: /[\\/]node_modules[\\/]/, | ||
166 | priority: -10, | ||
167 | reuseExistingChunk: true, | ||
168 | filename: devMode ? 'vendor.[id].js' : 'vendor.[contenthash].js', | ||
169 | }, | ||
170 | default: { | ||
171 | minChunks: 2, | ||
172 | priority: -20, | ||
173 | reuseExistingChunk: true, | ||
174 | }, | ||
175 | }, | ||
138 | }, | 176 | }, |
139 | }, | 177 | }, |
140 | devServer: { | 178 | devServer: { |
@@ -157,8 +195,8 @@ module.exports = { | |||
157 | }, | 195 | }, |
158 | plugins: [ | 196 | plugins: [ |
159 | new MiniCssExtractPlugin({ | 197 | new MiniCssExtractPlugin({ |
160 | filename: '[contenthash].css', | 198 | filename: '[name].[contenthash].css', |
161 | chunkFilename: '[contenthash].css', | 199 | chunkFilename: '[name].[contenthash].css', |
162 | }), | 200 | }), |
163 | new SubresourceIntegrityPlugin(), | 201 | new SubresourceIntegrityPlugin(), |
164 | new HtmlWebpackPlugin({ | 202 | new HtmlWebpackPlugin({ |
@@ -173,22 +211,17 @@ module.exports = { | |||
173 | useShortDoctype: true, | 211 | useShortDoctype: true, |
174 | }, | 212 | }, |
175 | }), | 213 | }), |
176 | new WebpackBeforeBuildPlugin((stats, callback) => { | 214 | new HtmlWebpackInjectPreload({ |
177 | // https://stackoverflow.com/a/40370750 | 215 | files: [ |
178 | const newlyCreatedAssets = stats.compilation.assets; | 216 | { |
179 | const unlinked = []; | 217 | match: /(roboto-latin-(400|500)-normal|jetbrains-mono-latin-variable).*\.woff2/, |
180 | fs.readdir(outputPath, (err, files) => { | 218 | attributes: { |
181 | files.forEach(file => { | 219 | as: 'font', |
182 | if (!newlyCreatedAssets[file]) { | 220 | type: 'font/woff2', |
183 | fs.unlinkSync(path.resolve(outputPath, file)); | 221 | crossorigin: 'anonymous', |
184 | unlinked.push(file); | 222 | }, |
185 | } | 223 | }, |
186 | }); | 224 | ], |
187 | if (unlinked.length > 0) { | 225 | }), |
188 | console.log('Removed old assets: ', unlinked); | ||
189 | } | ||
190 | }); | ||
191 | callback(); | ||
192 | }, ['done']), | ||
193 | ], | 226 | ], |
194 | }; | 227 | }; |