18-webpack 實現 Html、JavaScript、CSS 內聯

時間 2019-11-25

標籤 webpack 實現 html javascript css 內聯欄目 HTML 简体版

原文原文鏈接

在 10- webpack 自動生成 index.html 以後，index.html 的自動生成任務由 html-webpack-plugin 接管。javascript

有時候會面臨須要將一段 html標籤內容、初始化頁面的JavaScript、初始化樣式CSS 須要內聯的須要，能夠直接寫到 index.html 中去，可是爲了方便維護最好仍是把文件獨立出來，而後由 webpack 自動完成內聯任務。css

webpack 完成內聯任務，須要藉助 raw-laoder 完成。html

1、使用模板文件

修改 webpack.config.js 中的 html-webpack-plugin 的配置項，指定模板文件。java

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",//指定首頁模板
        }),
    ]
};
複製代碼

2、新建內聯文件

index.jsnode

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

demo.inline.htmlwebpack

<meta name=keywords content=webpack >
<meta name=description content=webpack是一個功能強大的打包工具>
複製代碼

demo.inline.jsgit

console.log("內聯JavaScript");
複製代碼

demo.inline.cssgithub

.hello{
    color: red;
}
複製代碼

3、安裝 raw-loader

安裝web

npm install raw-loader --save-dev
//
yarn add raw-loader --dev
複製代碼

安裝成功npm

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
└─ raw-loader@3.1.0
info All dependencies
└─ raw-loader@3.1.0
✨  Done in 4.36s.

複製代碼

4、編輯 src/index.html 模板文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--  內聯html  -->
    ${require("raw-loader!./demo.inline.html").default}
    <!--  內聯js  -->
    <script>
        ${require("raw-loader!./demo.inline.js").default}
    </script>
    <!--  內聯css  -->
    <style>
        ${require("raw-loader!./demo.inline.css").default}
    </style>
    <title>18-webpack 實現 Html、JavaScript、CSS 內聯</title>
</head>
<body>

</body>
</html>
複製代碼

5、查看 dist/index.html

而後查看 dist 目錄下自動生成的文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name=keywords content=webpack >
<meta name=description content=webpack是一個功能強大的打包工具>
    <script>
        console.log("內聯JavaScript");
    </script>
    <style>
        .hello{
    color: red;
}
    </style>
    <title>18-webpack 實現 Html、JavaScript、CSS 內聯</title>
</head>
<body>

<script type="text/javascript" src="main.bundle.js"></script></body>
</html>
複製代碼

在 Chrome 中打開 index.html，能夠看到 <meta>、字體樣式、console輸出。

6、語法說明

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: /<%=([\s\S]+?)%>/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);
複製代碼

參考連接

相關標籤/搜索

html+css+javascript+html

html&&css&&javascript

html+javascript+css

javascript+css+html

html+css+javascript+jquery

html+css+javascript

html&css&javascript

javascript+html+css

html+css+javascript+json

canvas+javascript+css+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。