OEUI-193 : Upgraded webpack to version 3.8.1 #137
Conversation
|
|
||
| const nodeModulesDir = path.resolve(__dirname, '../node_modules'); | ||
| const env = process.env.NODE_ENV; |
There was a problem hiding this comment.
Do we need to specify Our NODE_ENV version for this in the env file or does it use what ever NODE_ENV is on the machine?
There was a problem hiding this comment.
there is no env file, variables are set in npm scripts so you get access to them at runtime
| @@ -114,25 +143,22 @@ if (env === 'production') { | |||
| archive.directory(`${outputPath}`, ''); | |||
|
|
|||
| archive.finalize(); | |||
| })) | |||
|
|
|||
| } else if (env === 'deploy') { | |||
There was a problem hiding this comment.
I noticed deployed was deleted is it delibrate?
There was a problem hiding this comment.
yes it was! if you checked the npm scripts, you'd notice that the former made use of deploy as an option passed, we can use development and production instead
webpack.config.js
Outdated
| } | ||
|
|
||
| plugins.push(new BrowserSyncPlugin({ | ||
| proxy: { | ||
| target: browserSyncTarget | ||
| } | ||
| }, | ||
| // this ain't seem to be working, apparently would require webpack-dev-server; |
There was a problem hiding this comment.
If it is not working can we remove it, we should avoid having non-functional code.
There was a problem hiding this comment.
@jomadoye it's not non functional, thing is it reloads normally even by default check here but cos we're bootstrapping the app with the standalone, I believe previous builds get cached on the standalone hence the manual hard reloading and cache clearing so this is for making sure the OEUI actually reloads on changes. what I had in mind was to use webpack-dev-server here to force browser-sync to hard reload (thereby setting this to false) but it was losing the context of the standalone server, so I had to get rid of it, that's what I meant in those comments
package.json
Outdated
| "build:dev": "npm run clean && webpack --progress --colors --mode=dev --target=web", | ||
| "build:prod": "npm run test && npm run build", | ||
| "build:deploy": "webpack --progress --colors --mode=deploy --target=web", | ||
| "watch": "webpack --progress --colors --watch --mode=deploy --target=web", | ||
| "watch": "NODE_ENV=\"development\" webpack --progress --colors --watch --cache=false", |
There was a problem hiding this comment.
Hi @rhenshaw56
I see you changed the --mode=deploy flag to "NODE_ENV=\"development\" in the watch script and also updated the webpack config with that. But I noticed that this change is yet to be reflected in the build:deploy script, I am not sure the build:deploy script would work as it is unless you also reflect the change as you did with the watch script, let me know if I am wrong.
There was a problem hiding this comment.
@IAMOTZ so the previous webpack version had the --mode option and deploy was just a value to pass around and use in the config to know what mode you were actually running ie. production, dev etc, version 4 also has the mode option but 3 doesn't.
There was a problem hiding this comment.
it works as it should normally
There was a problem hiding this comment.
I should prolly update the other script commands also seeing as they have deploy on them
There was a problem hiding this comment.
Well, I just tried it out and it is not working. This is a snapshot of the error:
Since you updated this part of the configuration:
else if (env === 'deploy') {
outputFile = `${outputFile}.js`;
vendorOutputFile = "vendor.bundle.js";
outputPath = `${config.LOCAL_OWA_FOLDER}${config.LOCAL_OWA_FOLDER.slice(-1) != '/' ? '/' : ''}${THIS_APP_ID}`;
devtool = 'source-map';
}
to this:
if (env === 'development') {
outputFile = `${outputFile}.js`;
vendorOutputFile = "vendor.bundle.js";
outputPath = `${config.LOCAL_OWA_FOLDER}${config.LOCAL_OWA_FOLDER.slice(-1) != '/' ? '/' : ''}${THIS_APP_ID}`;
devtool = 'eval-source-map';
}
The build:deploy script is supposed to build the project and inject it in the OpenMRS standalone but with the changes you are making in the webpack.config.js, the build:deploy script needs to be also updated to something like this:
"build:deploy": "NODE_ENV=\"development\" webpack --progress --colors --target=web",
There was a problem hiding this comment.
good catch mahn! updating scripts asap
fixed bug with output path
JIRA TICKET NAME
OEUI-193: Update Webpack and babel-loader to latest version.
SUMMARY
This Pull Request upgrades webpack from version
1.15.0to3.8.1. I originally planned to use version4.16.5but ran into into compatibility issues, notably with plugins and loaders such as:html-webpack-pluginwas screaming errors, the fix was to use a fork of it which some nice folks apparently created which I don't recommend here. See threads:DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` insteadCan't load plugins using webpack 4I tried using both
extract-text-pluginandmini-css-extract-pluginsit was building perfectly but styles were not being loaded in, couldn't get it to work. checkout issue.The reason I didn't upgrade the
babel-loaderversion was because it's actually Ideal and stable for the3.8.1version of webpack I used and webpack 4 requiresbabel-loaderversions >=7plus we already got that inopenmrs/react-components.