Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#113: Upgrade to Webpack 5 #421

Merged
merged 10 commits into from
Jun 5, 2021
Merged

#113: Upgrade to Webpack 5 #421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
819165c
Upgrade to webpack 5
fregante Jun 3, 2021
bb5871e
Drop unused webpack dependencies
fregante Jun 3, 2021
2a9a22c
Fix `process.env` conflicts
fregante Jun 3, 2021
d58b7ff
Fix `global` conflict with ESM
fregante Jun 3, 2021
3afd3c9
Fix remaining runtime error
fregante Jun 3, 2021
253e863
Undo unnecessary `DefinePlugin` changes
fregante Jun 3, 2021
d63b74d
GHA fail: Attempt increasing mem size
fregante Jun 3, 2021
3162af4
Tentative fix for `amd: false` option for lodash
fregante Jun 3, 2021
1391468
Fix CSS loading issue
fregante Jun 4, 2021
705c038
Drop UMD from notify.js to fix bundling
fregante Jun 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions browsers/chrome/webpack/webpack.prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
*/

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { mergeWithCustomize, customizeArray } = require("webpack-merge");
const commonFactory = require("../../webpack/webpack.prod.js");
const webpack = require("webpack");
Expand Down Expand Up @@ -96,10 +95,5 @@ module.exports = () =>
},
],
}),
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "css/[id].css",
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should already be inherited from webpack.base.js

],
});
6 changes: 0 additions & 6 deletions browsers/firefox/webpack/webpack.prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
*/

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { mergeWithCustomize, customizeArray } = require("webpack-merge");
const commonFactory = require("../../webpack/webpack.prod.js");
const CopyPlugin = require("copy-webpack-plugin");
Expand Down Expand Up @@ -68,10 +67,5 @@ module.exports = () =>
},
],
}),
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "css/[id].css",
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
],
});
71 changes: 30 additions & 41 deletions browsers/webpack/webpack.base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebExtensionTarget = require("webpack-target-webextension");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

const rootDir = path.resolve(__dirname, "../../");

Expand Down Expand Up @@ -50,20 +51,14 @@ const babelLoader = {

const nodeConfig = {
global: true,
process: true,
Buffer: true,
console: true,
fs: "empty",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Webpack 5 no longer includes polyfills by default, so I ended up using https://github.com/Richienb/node-polyfill-webpack-plugin instead of installing 7 dependencies separately and configuring them here.

};

module.exports = {
context: rootDir,
node: nodeConfig,
target: WebExtensionTarget(nodeConfig),
output: {
// https://github.com/crimx/webpack-target-webextension#usage
globalObject: "window",
filename: "[name].js",
chunkFilename: "bundles/[name].bundle.js",
},
entry: {
Expand Down Expand Up @@ -93,14 +88,33 @@ module.exports = {
rootDir,
"src/contrib/uipath/quietLogger"
),

// An existence check triggers webpack’s warnings https://github.com/handlebars-lang/handlebars.js/issues/953
handlebars: "handlebars/dist/handlebars.js",
},
fallback: {
fs: false,
},
extensions: [".ts", ".tsx", ".jsx", ".js"],
},

// https://github.com/webpack/webpack/issues/3017#issuecomment-285954512
// prevent lodash from overriding window._
amd: false,

optimization: {
// Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=1108199
splitChunks: { automaticNameDelimiter: "-" },
},

// Silence new size limit warnings https://github.com/webpack/webpack/issues/3486#issuecomment-646997697
performance: {
maxEntrypointSize: 5120000,
maxAssetSize: 5120000,
},
plugins: [
new NodePolyfillPlugin(),
new WebExtensionTarget(nodeConfig),
// https://webpack.js.org/plugins/provide-plugin/
new webpack.ProvidePlugin({
$: "jquery",
Expand All @@ -120,29 +134,15 @@ module.exports = {
},
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "bundles/[name].bundle.css",
chunkFilename: "css/[id].css",
}),
],
module: {
rules: [
// https://github.com/webpack/webpack/issues/3017#issuecomment-285954512
// prevent lodash from overriding window._
{
exclude: /(notifyjs-browser|vendors\/notify)/,
parser: { amd: false },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fregante What was the reason for removing this? I had originally added this since having lodash overwrite window._ breaks sites running older versions of lodash

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry I blindly removed this line since it was deprecated:

Module not found: ValidationError: Invalid parser object. Json Modules Plugin has been initialized using a parser object that does not match the API schema.
 - parser has an unknown property 'amd'. These properties are valid:
   object { parse? }

I pushed a tentative solution for this. It compiles but I haven't run it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I can help show you how to test it. I think you just find a page where the PixieBrix contentScript is loaded and see if it set window._ or not.

To do that, you could just click the PixieBrix extension icon in the Chrome toolbar on any page to trigger the browser action, which will inject the contentScript and the side bar

Copy link
Contributor Author

@fregante fregante Jun 4, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. I clicked the button
  2. The sidebar appeared on the page
  3. window._ is undefined in the top frame in the console
  4. window._ is undefined in content script extension in the console

I also verified that without amd: false, window._ is a function in both context; This means amd: false fixes this Lodash issue. 🎉

However I think that this is breaking notify.js, so I will probably just drop the UMD from its bundle and adjust it to work correctly. The file is dated 2015 anyway.

},
{
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: "../",
},
},
MiniCssExtractPlugin.loader,
"css-loader",
{ loader: "sass-loader", options: { sourceMap: true } },
],
Expand All @@ -163,15 +163,10 @@ module.exports = {
{
test: /\.(svg|png|jpg|gif)?$/,
exclude: /(bootstrap-icons|simple-icons|custom-icons)/,
use: [
{
loader: "file-loader",
options: {
emitFile: true,
outputPath: "img",
},
},
],
type: "asset/resource",
generator: {
filename: "img/[name][ext]",
},
},
{
test: /(bootstrap-icons|simple-icons|custom-icons).*\.svg$/,
Expand All @@ -180,16 +175,10 @@ module.exports = {
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
exclude: /(bootstrap-icons|simple-icons)/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "fonts/",
publicPath: "fonts/",
},
},
],
type: "asset/resource",
generator: {
filename: "fonts/[name][ext]",
},
},
{
test: /\.ya?ml$/,
Expand Down
4 changes: 2 additions & 2 deletions browsers/webpack/webpack.prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const path = require("path");
const { mergeWithCustomize, customizeArray } = require("webpack-merge");
const common = require("./webpack.base.js");
const TerserJSPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const RollbarSourceMapPlugin = require("rollbar-sourcemap-webpack-plugin");
const webpack = require("webpack");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
Expand Down Expand Up @@ -76,7 +76,7 @@ module.exports = (rollbarPublicPath) => {
output: { ascii_only: true },
},
}),
new OptimizeCSSAssetsPlugin({}),
new CssMinimizerPlugin(),
],
},
plugins: [
Expand Down
Loading