vue中自定義html文件的模板

本文轉載自查看原文 2019-04-17 18:59 4097 html模板/ vue/ html/css/ js

如果默認生成的 HTML 文件不適合需求，可以創建/使用自定義模板。

一是通過 inject 選項，然后傳遞給定制的 HTML 文件。html-webpack-plugin 將會自動注入所有需要的 CSS, js, manifest 和 favicon 文件到標記中。

plugins: [
  new HtmlWebpackPlugin({
    title: 'Custom template',
    template: 'myIndex.html', // Load a custom template 
    inject: 'body' // Inject all scripts into the body 
  })
]

自定義的myIndex.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

參考：http://www.cnblogs.com/haogj/p/5160821.html

另一個是配置html-webpack-plugin

使之直接為項目生成一個或多個HTML文件（HTML文件個數由插件實例的個數決定），

並將webpack打包后輸出的所有腳本文件自動添加到插件生成的HTML文件中。

以下例子將通過配置，可以將根目錄下用戶自定義的HTML文件作為插件生成HTML文件的模板。另外，還可以通過向插件傳遞參數，控制HTML文件的輸出。

1.在項目根目錄下安裝插件

cnpm install html-webpack-plugin --save-dev

2.在webpack配置文件頭部require html-webpack-plugin模塊，並保存引用至htmlWebpackPlugin[變量]。

const HtmlWebpackPlugin = require('html-webpack-plugin')

3.為webpack配置文件暴露的對象添加一個plugins 屬性，屬性值為一個數組，將新建的html-webpack-plugin對象實例添加到數組中。若不傳入任何參數，那么插件將生成默認的html文件。

module.exports = {
 entry: {
     main:'./src/script/main.js'
 },
 output: {
     path: './dist',
     filename: 'js/[name].bundle.js'
 },
 plugins:[
     new htmlWebpackPlugin()
     ]
}

4.配置參數。為新建的對象實例傳入一個對象字面量參數，初始化對象實例的屬性

plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: resolve('favicon.ico'),
      title: 'vue-element-admin',
      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
    }),
  ]

5.在HTML中使用

  <body>
    <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>  
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

參考：

https://www.jianshu.com/p/89414e89c563

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue 在 html 中自定義 tag VSCode新建vue文件自定義模板 VSCode 自定義html5模板 vscode自定義vue模板代碼 html中自定義上傳文件的樣式自定義XML文件模板步驟 html-webpack-plugin 單文件/多文件以及配置自定義模板 PyCharm 自定義文件和代碼模板 eclipse中自定義注釋模板 VScode中的自定義模板