18-webpack Html、JavaScript、CSSインラインを実現
5525 ワード
10-webpackでindexを自動的に生成する.htmlの後、index.htmlの自動生成タスクは
htmlタグの内容、初期化ページのJavaScript、初期化スタイルCSSをインラインする必要がある場合があり、indexに直接書くことができる.htmlでは行きますが、メンテナンスを容易にするためにファイルを独立させ、webpackで自動的にインラインタスクを完了したほうがいいです.
Webpackはインラインタスクを完了し、
Webpackを変更します.config.jsの
index.js
demo.inline.html
demo.inline.js
demo.inline.css
インストール
インストール成功
次にdistディレクトリの下で自動的に生成されたファイルを表示します.
Chromeでindexを きます.htmlは、
html-webpack-pluginのtemplateはindexを する.htmlファイルはwebpackに して.config.jsの パスまたは パス.
loaderを しない lodash loaderを
コード
テンプレート とオプションオブジェクトを して、コンパイルテンプレート を します.
コアコード
requireを してexport defaultをロードするには さが です.defaultプロパティでのコンテンツの
リファレンスリンク HtmlWebpackPlugin html-webpack-plugin raw-loader html-webpack-plugin/docs/template-option.md html-webpack-plugin/lib/loader.js _.template webpack サンプルコード
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);
リファレンスリンク