Webpack Plugin
A webpack plugin which runs PJSD on every chunk using the compiler's "afterCompile" hook.
Installation
Install the plugin to your project:
npm install <package-directory>/preemptive-pjsd-core-{version}.tgz <package-directory>/preemptive-pjsd-webpack-plugin-{version}.tgz --save-dev
OR
yarn add file:<package-directory>/preemptive-pjsd-core-{version}.tgz file:<package-directory>/preemptive-pjsd-webpack-plugin-{version}.tgz
Note: The webpack plugin has
@preemptive/pjsd-core
as its peerDependency; this is why you must also install it.
Usage
Import the plugin in your webpack.config.js
and add it to the plugins
array:
const { PjsdWebpackPlugin } = require('@preemptive/pjsd-webpack-plugin');
// --Other configuration
plugins: [
// --Other plugins
new PjsdWebpackPlugin({
configurationFile: 'pjsd.config.json', // Path to the configuration file if any
quietMode: false, // Display protection logs
includeChunks: [ 'app', 'util' ], // The chunk names that should be protected
excludeChunks: [ 'vendor', 'util' ], // The chunk names that should not be protected
/* Other PJSD options e.g. booleanLiterals, stringLiterals etc. could also be provided here */
})
]
Note: If a chunk is specified both in
includeChunks
andexcludeChunks
then the exclusion takes precedence.
Usage in an Angular 6+ project
The PJSD webpack plugin can be configured in an Angular 6+ project. In order to do this, first add the ngx-build-plus package via the Angular CLI:
ng add ngx-build-plus@^{your-angular-major-version}.0.0
Note: This step installs the package via npm and updates your angular.json so that your project uses custom builders for ng serve and ng build.
After that, create a file called webpack.partial.js
in your Angular project and put the configuration into it like this:
const { PjsdWebpackPlugin } = require('@preemptive/pjsd-webpack-plugin');
module.exports = {
plugins: [
new PjsdWebpackPlugin({
/* You can use the same PJSD configuration as above */
exlcudeChunks: [ 'vendor', 'scripts', 'common', 'runtime', 'polyfills', 'polyfills-es5', 'styles' ] // vendor chunk should be always excluded, but other system chunks could also have problems, especially the polyfills
})
]
}
Be sure to not include the vendor
chunk because it has some deprecated code in it that PJSD cannot protect. If you still encounter problems after excluding the vendor
chunk, then you should try to exclude other system chunks starting with the polyfills
and polyfills-es5
, but if you want maximal performance, exclude every system chunk specified in the example config above. The exclusion can be achieved either by including the app's chunks or by excluding the appropriate chunks. Of course you can also include or exclude any other chunks.
Note: First you have to enable the creation of the
vendor
chunk in theangular.json
's production build configuration with the"vendorChunk": true
option. Learn more at the ng build documentation.
The next step is to add the partial webpack configuration to your build, or run scripts with the --extra-webpack-config
flag in your package.json
:
"scripts": {
"build:browser:prod": "ng build --extra-webpack-config webpack.partial.js --prod",
"run:browser:prod": "ng serve --extra-webpack-config webpack.partial.js --prod",
}
Then build or run your project and check the output chunks that should be protected. It should work either with Angular or with Angular Universal (Server Side Rendering).
Tested Angular versions: ^8.0.0
Configuration
The PJSD webpack plugin accepts the same configuration object as the PJSD configuration file. You can learn more about it at the documentation home.
Note: If a PJSD
configurationFile
is present, its individual configuration lines overwrite the PJSD configuration directly used in thewebpack.config.js
. E.g. if you setbooleanLiterals: true
for thePjsdWebpackPlugin
but there is aconfigurationFile
set which hasbooleanLiterals: false
, then the latter will take precedence.
Limitations and known issues
Webpack Dev build comments
The development build of webpack adds comments to the output chunks/bundles and some of these comments may be used by the application at runtime. PJSD removes comments from the sources and there is no way to disable this behavior. So, in some situations the plugin can break the application's development build. Webpack's production build does not use these comments, so the runtime behavior should not be affected.