Skip to content

Implement assets webpack plugin #410

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

Merged
merged 1 commit into from
Oct 26, 2018
Merged

Implement assets webpack plugin #410

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
41 changes: 30 additions & 11 deletions lib/plugins/entry-files-manifest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,46 @@

'use strict';

const EntryFilesManifestPlugin = require('../webpack/entry-files-manifest-plugin');
const PluginPriorities = require('./plugin-priorities');
const path = require('path');
const sharedEntryTmpName = require('../utils/sharedEntryTmpName');
const copyEntryTmpName = require('../utils/copyEntryTmpName');
const manifestKeyPrefixHelper = require('../utils/manifest-key-prefix-helper');
const AssetsPlugin = require('assets-webpack-plugin');

function processOutput(assets) {
if (assets.hasOwnProperty(copyEntryTmpName)) {
delete assets[copyEntryTmpName];
}
if (assets.hasOwnProperty(sharedEntryTmpName)) {
delete assets[sharedEntryTmpName];
Copy link
Member

Choose a reason for hiding this comment

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

We now need to delete one other "magic: entry that may exist :) #409 (comment)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I will get this done.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Altered the function to take care of this issue.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@weaverryan Is the any other files we need to delete from the output?

}
// This will iterate over all the entry points and remove the / from the start of the paths. It also converts the
// one file entries into an array of one entry since that was how the entry point file was before this change.
for (const asset in assets) {
Copy link
Member

@weaverryan weaverryan Oct 19, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

Can we add a little comment about what this is doing / why?

And, if I understand it correctly, this gives us complete control over the output, right? Could we "correct" the output so that if there's only one entry, it's always an array? That would remove one of the slightly weird edge-cases that the bundle would need to handle.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

true I never thought of that. Yes we could turn it into an array. I will add that to this PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I updated the function to now put the single instances into an array. I also out a comment above the loop.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@weaverryan Is there anything else we need to do to the output?

for (const fileType in assets[asset]) {
if (Array.isArray(assets[asset][fileType])) {
assets[asset][fileType] = assets[asset][fileType].map(buildPath => buildPath.replace(/^\//g, ''));
} else {
assets[asset][fileType] = [assets[asset][fileType].replace(/^\//g, '')];
}
}
}
return JSON.stringify(assets);
}

/**
* @param {Array} plugins
* @param {WebpackConfig} webpackConfig
* @return {void}
*/
module.exports = function(plugins, webpackConfig) {

plugins.push({
plugin: new EntryFilesManifestPlugin(
path.join(webpackConfig.outputPath, 'entrypoints.json'),
manifestKeyPrefixHelper(webpackConfig),
[sharedEntryTmpName, copyEntryTmpName],
webpackConfig.styleEntries
),
priority: PluginPriorities.EntryFilesManifestPlugin
plugin: new AssetsPlugin({
path: webpackConfig.outputPath,
filename: 'entrypoints.json',
includeAllFileTypes: true,
entrypoints: true,
processOutput: processOutput
}),
priority: PluginPriorities.AssetsPlugin
});
};
2 changes: 1 addition & 1 deletion lib/plugins/plugin-priorities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,5 @@ module.exports = {
SharedEntryContactPlugin: 20,
ForkTsCheckerWebpackPlugin: 10,
HashedModuleIdsPlugin: 0,
EntryFilesManifestPlugin: -10,
AssetsPlugin: -10,
};
138 changes: 0 additions & 138 deletions lib/webpack/entry-files-manifest-plugin.js
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"@babel/core": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"assets-webpack-plugin": "^3.9.7",
"babel-loader": "^8.0.0",
"chalk": "^2.4.1",
"clean-webpack-plugin": "^0.1.19",
Expand Down
39 changes: 21 additions & 18 deletions test/functional.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,16 +103,14 @@ describe('Functional tests using webpack', function() {

webpackAssert.assertOutputJsonFileMatches('entrypoints.json', {
main: {
js: ['build/runtime.js', 'build/main.js'],
css: []
js: ['build/runtime.js', 'build/main.js']
},
font: {
// no runtime for style entries
js: [],
js: ['build/runtime.js'],
css: ['build/font.css']
},
bg: {
js: [],
js: ['build/runtime.js'],
css: ['build/bg.css']
},
});
Expand Down Expand Up @@ -1608,7 +1606,6 @@ module.exports = {
config.addEntry('other', ['./css/roboto_font.css', 'vue']);
config.setPublicPath('/build');
// enable versioning to make sure entrypoints.json is not affected
config.enableVersioning();
config.splitEntryChunks();
config.configureSplitChunks((splitChunks) => {
splitChunks.minSize = 0;
Expand All @@ -1633,7 +1630,7 @@ module.exports = {
});
});

it('Custom public path does affect entrypoints.json or manifest.json', (done) => {
it('Custom public path does affect entrypoints.json but does not affect manifest.json', (done) => {
const config = createWebpackConfig('web/build', 'dev');
config.addEntry('main', ['./css/roboto_font.css', './js/no_require', 'vue']);
config.addEntry('other', ['./css/roboto_font.css', 'vue']);
Expand All @@ -1647,12 +1644,22 @@ module.exports = {
testSetup.runWebpack(config, (webpackAssert) => {
webpackAssert.assertOutputJsonFileMatches('entrypoints.json', {
main: {
js: ['custom_prefix/runtime.js', 'custom_prefix/vendors~main~other.js', 'custom_prefix/main~other.js', 'custom_prefix/main.js'],
css: ['custom_prefix/main~other.css']
js: [
'http://localhost:8080/build/runtime.js',
'http://localhost:8080/build/vendors~main~other.js',
'http://localhost:8080/build/main~other.js',
'http://localhost:8080/build/main.js'
],
css: ['http://localhost:8080/build/main~other.css']
},
other: {
js: ['custom_prefix/runtime.js', 'custom_prefix/vendors~main~other.js', 'custom_prefix/main~other.js', 'custom_prefix/other.js'],
css: ['custom_prefix/main~other.css']
js: [
'http://localhost:8080/build/runtime.js',
'http://localhost:8080/build/vendors~main~other.js',
'http://localhost:8080/build/main~other.js',
'http://localhost:8080/build/other.js'
],
css: ['http://localhost:8080/build/main~other.css']
},
});

Expand Down Expand Up @@ -1698,8 +1705,6 @@ module.exports = {
config.addEntry('main', ['./js/code_splitting', 'vue']);
config.addEntry('other', ['./js/no_require', 'vue']);
config.setPublicPath('/build');
// enable versioning to make sure entrypoints.json is not affected
config.enableVersioning();
config.splitEntryChunks();
config.configureSplitChunks((splitChunks) => {
splitChunks.minSize = 0;
Expand All @@ -1708,20 +1713,18 @@ module.exports = {
testSetup.runWebpack(config, (webpackAssert) => {
webpackAssert.assertOutputJsonFileMatches('entrypoints.json', {
main: {
js: ['build/runtime.js', 'build/vendors~main~other.js', 'build/main.js'],
css: []
js: ['build/runtime.js', 'build/vendors~main~other.js', 'build/main.js']
},
other: {
// the 0.[hash].js is because the "no_require" module was already split to this
// so, it has that filename, instead of following the normal pattern
js: ['build/runtime.js', 'build/vendors~main~other.js', 'build/0.f1e0a935.js', 'build/other.js'],
css: []
js: ['build/runtime.js', 'build/vendors~main~other.js', 'build/0.js', 'build/other.js']
},
});

// make split chunks are correct in manifest
webpackAssert.assertManifestKeyExists('build/vendors~main~other.js');
webpackAssert.assertManifestKeyExists('build/0.f1e0a935.js');
webpackAssert.assertManifestKeyExists('build/0.js');

done();
});
Expand Down
23 changes: 22 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1238,6 +1238,17 @@ assertion-error@^1.0.1:
resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==

assets-webpack-plugin@^3.9.7:
version "3.9.7"
resolved "https://registry.yarnpkg.com/assets-webpack-plugin/-/assets-webpack-plugin-3.9.7.tgz#0c3c13632cc4490b2ef79fd0bbb16c69a724f364"
integrity sha512-yxo4MlSb++B88qQFE27Wf56ykGaDHZeKcSbrstSFOOwOxv33gWXtM49+yfYPSErlXPAMT5lVy3YPIhWlIFjYQw==
dependencies:
camelcase "^5.0.0"
escape-string-regexp "^1.0.3"
lodash.assign "^4.2.0"
lodash.merge "^4.6.1"
mkdirp "^0.5.1"

assign-symbols@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
Expand Down Expand Up @@ -1719,6 +1730,11 @@ camelcase@^4.1.0:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=

camelcase@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==

caniuse-api@^1.5.2:
version "1.6.1"
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
Expand Down Expand Up @@ -2894,7 +2910,7 @@ escape-html@~1.0.3:
resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=

[email protected], escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
[email protected], escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
Expand Down Expand Up @@ -5016,6 +5032,11 @@ lodash.memoize@^4.1.2:
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=

lodash.merge@^4.6.1:
version "4.6.1"
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
integrity sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==

lodash.mergewith@^4.6.0:
version "4.6.1"
resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
Expand Down