18-webpack Html、JavaScript、CSSインラインを実現


10-webpackでindexを自動的に生成する.htmlの後、index.htmlの自動生成タスクはhtml-webpack-pluginによって引き継がれる.
htmlタグの内容、初期化ページのJavaScript、初期化スタイルCSSをインラインする必要がある場合があり、indexに直接書くことができる.htmlでは行きますが、メンテナンスを容易にするためにファイルを独立させ、webpackで自動的にインラインタスクを完了したほうがいいです.
Webpackはインラインタスクを完了し、raw-laoderを借りて完了する必要があります.

一、テンプレートファイルの使用


Webpackを変更します.config.jsのhtml-webpack-pluginの構成項目で、テンプレートファイルを指定します.
const path = require('path');
const HtmlWebpackPlugin  = require("html-webpack-plugin");
module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: "18-webpack    Html、JavaScript、CSS   ",
            template:"./src/index.html",//      
        }),
    ]
};

二、新規インラインファイル


index.js
function component() {
    let element = document.createElement('div');
    element.innerHTML = "Hello webpack !";
    element.classList.add("hello");
    return element;
}
document.body.appendChild(component());

demo.inline.html



demo.inline.js
console.log("  JavaScript");

demo.inline.css
.hello{
    color: red;
}

三、raw-loaderのインストール


インストール
npm install raw-loader --save-dev
//
yarn add raw-loader --dev

インストール成功
yarn add v1.16.0
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
[3/4] ?  Linking dependencies...
[4/4] ?  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
✨  Done in 4.36s.


四、src/indexを編集する。htmlテンプレートファイル




    
    
    
    
    ${require("raw-loader!./demo.inline.html").default}
    
    
        ${require("raw-loader!./demo.inline.js").default}
    
    
    
    18-webpack    Html、JavaScript、CSS   






五、dist/indexを表示する。html


次にdistディレクトリの下で自動的に生成されたファイルを表示します.



    
    
    
        

    
        console.log("  JavaScript");
    
    
    18-webpack    Html、JavaScript、CSS   






Chromeでindexを きます.htmlは、、フォントスタイル、console が されます.


6.1 template


html-webpack-pluginのtemplateはindexを する.htmlファイルはwebpackに して.config.jsの パスまたは パス.

6.2 template

{
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}

loaderを しない lodash loaderを

6.3 lodash loader


コード
  // The following part renders the template with lodash as a minimalistic loader
  //
  const template = _.template(source, _.defaults(options, { interpolate: //g, variable: 'data' }));
  // Use __non_webpack_require__ to enforce using the native nodejs require
  // during template execution
  return 'var _ = __non_webpack_require__(' + JSON.stringify(require.resolve('lodash')) + ');' +
    'module.exports = function (templateParams) { with(templateParams) {' +
      // Execute the lodash template
      'return (' + template.source + ')();' +
    '}}';

6.4 lodash _.template

_.template([string=''], [options={}])

テンプレート とオプションオブジェクトを して、コンパイルテンプレート を します.

6.4 raw-loader


コアコード
import { getOptions } from 'loader-utils';
import validateOptions from 'schema-utils';

import schema from './options.json';

export default function rawLoader(source) {
  const options = getOptions(this) || {};

  validateOptions(schema, options, {
    name: 'Raw Loader',
    baseDataPath: 'options',
  });

  const json = JSON.stringify(source)
    .replace(/\u2028/g, '\\u2028')
    .replace(/\u2029/g, '\\u2029');

  return `export default ${json}`;
}

requireを してexport defaultをロードするには さが です.defaultプロパティでのコンテンツの
const something = require("something");
console.log(something.default);

リファレンスリンク
  • HtmlWebpackPlugin
  • html-webpack-plugin
  • raw-loader
  • html-webpack-plugin/docs/template-option.md
  • html-webpack-plugin/lib/loader.js
  • _.template
  • webpack
  • サンプルコード