Comments (1)
I write a custom plugin to sovle it.
/* A plugin to compitible html-webpack-plugin v4 otherwise failed of injection */
let fs = require("fs");
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
function getAutoDLLFiles() {
// cacheDir : projectPath\node_modules\.cache\autodll-webpack-plugin
var cacheDir = require("autodll-webpack-plugin/node_modules/find-cache-dir")({
name: "autodll-webpack-plugin"
});
if (cacheDir) {
let files = fs.readdirSync(cacheDir);
let scripts, styles;
let childDir = files.filter(
item => item.indexOf("development_instance") > -1 // eg. development_instance_0_d58c4bb0bc931d01a844ded15994e547
)[0];
cacheDir = path.join(cacheDir, childDir);
if (cacheDir) {
// get files name
files = fs.readdirSync(cacheDir);
scripts = files.filter(item => item.endsWith(".js"));
styles = files.filter(item => item.endsWith(".css"));
}
return { scripts, styles };
}
return { scripts: [], styles: [] };
}
class AutoDLLInjectPlugin {
constructor(options) {
this.options = options;
}
apply(compiler) {
let _this = this;
compiler.hooks.compilation.tap("AutoDllPlugin", function(compilation) {
if (!HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration) {
return;
}
HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
"AutoDllPlugin",
function(htmlPluginData, callback) {
// htmlPluginData.assets.js
// ["/../dist/vendors/vendor.320d23.js", "/activity\\index.0aa46b.js"];
let { scripts, styles } = getAutoDLLFiles();
if (_this.options.fileMap) {
scripts = scripts.map(_this.options.fileMap);
styles = styles.map(_this.options.fileMap);
}
htmlPluginData.assets.js = [].concat(
scripts,
htmlPluginData.assets.js
);
htmlPluginData.assets.css = [].concat(
styles,
htmlPluginData.assets.css
);
// console.log(htmlPluginData.assets.js);
callback(null, htmlPluginData);
}
);
});
}
}
module.exports = AutoDLLInjectPlugin;
Usage:
Put the following code after html-webpack-plugin, like:
let AutoDLLInjectPlugin = require("../plugins/AutoDLLInjectPlugin.js");
config.plugins.push(
new AutoDLLInjectPlugin({
fileMap: filename => `/vendors/${filename}`
})
);
or
plugins: [
new HtmlWebpackPlugin({
filename: path.relative(
path.join(projectPath, "src/pages"),
html
),
template: hbs,
inject: true,
chunks: [entry]
}),
new AutoDLLInjectPlugin({
fileMap: filename => `/vendors/${filename}`
})
]
from autodll-webpack-plugin.
Related Issues (20)
- 'Is valid cache' is aways false
- How to DevExpress to DLL? HOT 3
- got error when use dynamic import
- Only updating package produces wrong broken dll-links when using chunkhashes
- AutoDLL not working in NextJS HOT 1
- webpack4中每次修改app.js时dll会重新打包 HOT 1
- TypeError: Cannot read property 'properties' of undefined HOT 1
- multiple dll packages are generated, it will cause duplicate references HOT 2
- Is it support css dll?
- ModuleNotFoundError with Webpack 4
- stats.json are too big HOT 1
- How do I set entryOnly to true to enable treeshaking?
- Plugins are not run when cache is valid
- Autodll-webpack-plugin specifying node_modules in different projects
- what is the right context for a monorepo setup?
- inject the DLL bundles into the html fail HOT 5
- add path parameter html script src can add /
- Cannot add property autodllStatsRetrieved, object is not extensible HOT 3
- how to use this plugin with create-react-app & craco ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from autodll-webpack-plugin.