├── appveyor.yml ├── .gitattributes ├── package.json ├── .gitignore ├── index.js └── README.md /appveyor.yml: -------------------------------------------------------------------------------- 1 | build: off 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html-webpack-inline-chunk-plugin", 3 | "version": "1.1.1", 4 | "description": "webpack plugin to inline chunk in html webpack plugin", 5 | "repository": { 6 | "url": "https://github.com/rohitlodha/html-webpack-inline-chunk-plugin" 7 | }, 8 | "main": "index.js", 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "author": "Rohit", 13 | "license": "MIT", 14 | "dependencies": { 15 | "lodash": "^4.15.0", 16 | "source-map-url": "^0.4.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directories 27 | node_modules 28 | jspm_packages 29 | 30 | # Optional npm cache directory 31 | .npm 32 | 33 | # Optional REPL history 34 | .node_repl_history 35 | 36 | # ========================= 37 | # Operating System Files 38 | # ========================= 39 | 40 | # OSX 41 | # ========================= 42 | 43 | .DS_Store 44 | .AppleDouble 45 | .LSOverride 46 | 47 | # Thumbnails 48 | ._* 49 | 50 | # Files that might appear in the root of a volume 51 | .DocumentRevisions-V100 52 | .fseventsd 53 | .Spotlight-V100 54 | .TemporaryItems 55 | .Trashes 56 | .VolumeIcon.icns 57 | 58 | # Directories potentially created on remote AFP share 59 | .AppleDB 60 | .AppleDesktop 61 | Network Trash Folder 62 | Temporary Items 63 | .apdisk 64 | 65 | # Windows 66 | # ========================= 67 | 68 | # Windows image file caches 69 | Thumbs.db 70 | ehthumbs.db 71 | 72 | # Folder config file 73 | Desktop.ini 74 | 75 | # Recycle Bin used on file shares 76 | $RECYCLE.BIN/ 77 | 78 | # Windows Installer files 79 | *.cab 80 | *.msi 81 | *.msm 82 | *.msp 83 | 84 | # Windows shortcuts 85 | *.lnk 86 | 87 | # IDE 88 | .idea/ -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var sourceMappingURL = require('source-map-url'); 2 | var _ = require('lodash'); 3 | function InlineChunkPlugin (options) { 4 | this.options = Object.assign({ inlineChunks: [], quiet: false }, options); 5 | } 6 | 7 | InlineChunkPlugin.prototype.log = function(message) { 8 | if (!this.options.quiet) { 9 | console.log(message); 10 | } 11 | }; 12 | 13 | InlineChunkPlugin.prototype.apply = function (compiler) { 14 | var me = this; 15 | 16 | compiler.plugin('compilation', function (compilation) { 17 | 18 | compilation.plugin('html-webpack-plugin-alter-asset-tags', (htmlPluginData, callback) => { 19 | 20 | var publicPath = compilation.options.output.publicPath || ''; 21 | if (publicPath && publicPath.substr(-1) !== '/') { 22 | publicPath += '/'; 23 | } 24 | _.each(me.options.inlineChunks, function (name) { 25 | var chunkPath = (compilation.chunks.filter(function (chunk) { 26 | return chunk.name === name; 27 | })[0] || { files: [] }).files[0]; 28 | 29 | me.log("html-webpack-inline-chunk-plugin: Inlined " + chunkPath); 30 | if (chunkPath) { 31 | var tag = _.find(htmlPluginData.body, { attributes: { src: publicPath + chunkPath } }); 32 | if (tag) { 33 | delete tag.attributes.src; 34 | tag.innerHTML = sourceMappingURL.removeFrom(compilation.assets[chunkPath].source()); 35 | } 36 | } 37 | }); 38 | callback(null, htmlPluginData); 39 | }); 40 | }); 41 | }; 42 | 43 | module.exports = InlineChunkPlugin; 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Inline Chunk Webpack Plugin 2 | =================== 3 | 4 | This is a [webpack](http://webpack.github.io/) plugin that inline your chunks that is written as links or script using [HtmlWebpackPlugin](https://github.com/ampedandwired/html-webpack-plugin). 5 | It can be use to inline manifest within script tag to save a http request as described in [this example](https://github.com/webpack/webpack/tree/master/examples/chunkhash). It is not limited to manifest chunk but can inline any other chunk. 6 | 7 | This plugin requires [HtmlWebpackPlugin](https://www.npmjs.com/package/html-webpack-plugin) v2.10.0 and above. 8 | 9 | Installation 10 | ------------ 11 | Install the plugin with npm: 12 | ```shell 13 | $ npm install html-webpack-inline-chunk-plugin --save-dev 14 | ``` 15 | 16 | Configuration 17 | ----------- 18 | - `inlineChunks`: An array of names of chunk to inline. 19 | - `quiet`: If set to `true` the plugin won't display any log information. (default value: `false`) 20 | ```javascript 21 | //webpack.config 22 | const InlineChunkWebpackPlugin = require('html-webpack-inline-chunk-plugin'); 23 | module.exports = { 24 | //..... 25 | //..... 26 | plugins: [ 27 | //... 28 | //... 29 | new InlineChunkWebpackPlugin({ 30 | inlineChunks: ['manifest'] 31 | }) 32 | //... 33 | ] 34 | //..... 35 | //..... 36 | } 37 | ``` 38 | Example Usage 39 | ----------- 40 | 41 | [Webpack](http://webpack.github.io/)'s runtime changes with every build. For effective long-term caching, we separate the runtime code in manifest.js. This manifest.js is very small and increases our startup time as it is a separate http request. Inlining the generated manifest.js in the index.html is a solution. 42 | 43 | Split webpack runtime in manifest and inline it. 44 | ```javascript 45 | // for explicit vendor chunk config 46 | { 47 | entry: { 48 | app: './main.js', 49 | vendors: ['react','redux'] 50 | }, 51 | output: { 52 | path: path.join(__dirname, "js"), 53 | filename: "[name].[chunkhash].js", 54 | chunkFilename: "[chunkhash].js" 55 | }, 56 | plugins: [ 57 | new webpack.optimize.CommonsChunkPlugin({ 58 | names: ['common', 'manifest'] 59 | }), 60 | new HtmlWebpackPlugin({ 61 | // your options, 62 | excludeChunks: ['vendors'] 63 | }), 64 | new InlineChunkWebpackPlugin({ 65 | inlineChunks: ['manifest'] 66 | }) 67 | ] 68 | } 69 | ``` 70 | 71 | # License 72 | 73 | This project is licensed under [MIT](https://github.com/ampedandwired/html-webpack-plugin/blob/master/LICENSE). --------------------------------------------------------------------------------