Package Exports

inline-source-webpack-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (inline-source-webpack-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

inline-source-webpack-plugin

A webpack plugin to embed css/js resource in the html with inline-source module(html-webpack-plugin is needed).

Install

$ npm i inline-source-webpack-plugin -D

example

<!-- ./demo/src/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <link href="inline.css" inline>
    <script src="inline.js" inline></script>
  </head>
  <body>
    <div class="container">
      <h1>hello world!</h1>
    </div>
    <!-- 'inline-bundle' attribute tell us to embed file that generated by webpack -->
    <script inline inline-bundle="bundle\.\w+\.js$" inline-bundle-delete></script>
  </body>
</html>

/* ./demo/src/inline.js */
function Person() {
}

Person.prototype.sayHello = function () {
  var word = 'hello';
  console.log(word);
};

/* ./demo/src/bundle.js */
console.log('This file is build by webpack.But InlineSourceWebpackPlugin will embed it into html file.');

/* ./demo/src/inline.css */
.container {
  border: 1px solid #000;
}

Output:

<!-- ./demo/dist/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>.container{border:1px solid #ff2c58}</style>
    <script>function Person(){}Person.prototype.sayHello=function(){console.log("[inline]:","hello world!")},(new Person).sayHello();</script>
  </head>
  <body>
    <div class="container">
      <h1>hello world!</h1>
    </div>
    <!-- 'inline-bundle' attribute tell us to embed file that generated by webpack -->
    <script>(window.webpackJsonp=window.webpackJsonp||[]).push([["bundle"],[,function(i,e){console.log("This file is build by webpack.But InlineSourceWebpackPlugin will embed it into html file.")}],[[1,"runtime"]]]);</script>
  <script type="text/javascript" src="/inline-source-webpack-plugin/demo/dist/runtime.ee77f51ffadaa60b61bb.js"></script><script type="text/javascript" src="/inline-source-webpack-plugin/demo/dist/index.52decaca808fa7663ddf.js"></script></body>
</html>

note: You can find this demo in the demo directory.

Usage

Available options include(refer to this for more options):

compress: enable/disable compression.(default false)
rootpath: path used for resolving inlineable paths.

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineSourceWebpackPlugin = require('inline-source-webpack-plugin');

module.exports = {
  ...,
  plugins: [
    new HtmlWebpackPlugin({
      ...
    }),
    new InlineSourceWebpackPlugin({
      compress: true,
      rootpath: './src'
    })
  ]
};

If you want to embed the files that generated by webpack or other plugin, you can use inline-bundle attribute to filter the files(Please don't try to use src or href). Add inline-bundle-delete attribute for deleting the bundle after inline task.

<script inline inline-bundle-delete inline-bundle="Your bundle path/Your bundle name"></script>

The value of inline-bundle attribute is a regular expression.

License

MIT License