webpack打包版本號定義

時間 2019-11-19

標籤 webpack 打包本號定義简体版

原文原文鏈接

首先版本號的定義是爲了解決緩存的問題javascript

在編譯的時候webpack提供了css

插件html-webpack-plugin，

本文以時間做爲版本號html

<!DOCTYPE html>
<html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="Bootstrap Admin App + jQuery">
    <meta name="keywords" content="app, responsive, jquery, bootstrap, dashboard, admin">
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/assets/styles/main.css"/>
    <title>限公司</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="/dist/bundle.js?v=20171111-17：58：03"></script>
  </body>
</html>

html-webpack-plugin配置項

插件提供的配置項比較多，經過源碼能夠看出具體的配置項以下：java

this.options = _.extend({
    template: path.join(__dirname, 'default_index.ejs'),
    filename: 'index.html',
    hash: false,
    inject: true,
    compile: true,
    favicon: false,
    minify: false,
    cache: true,
    showErrors: true,
    chunks: 'all',
    excludeChunks: [],
    title: 'Webpack App',
    xhtml: false
  }, options);

title: 生成的html文檔的標題。配置該項，它並不會替換指定模板文件中的title元素的內容，除非html模板文件中使用了模板引擎語法來獲取該配置項值，以下ejs模板語法形式：

<title>{%= o.htmlWebpackPlugin.options.title %}</title>

filename：輸出文件的文件名稱，默認爲index.html，不配置就是該文件名；此外，還能夠爲輸出文件指定目錄位置（例如'html/index.html'）jquery

關於filename補充兩點：webpack

一、filename配置的html文件目錄是相對於webpackConfig.output.path路徑而言的，不是相對於當前項目目錄結構的。
二、指定生成的html文件內容中的link和script路徑是相對於生成目錄下的，寫路徑的時候請寫生成目錄下的相對路徑。web
template: 本地模板文件的位置，支持加載器(如handlebars、ejs、undersore、html等)，如好比 handlebars!src/index.hbs；sql

關於template補充幾點：bootstrap

一、template配置項在html文件使用file-loader時，其所指定的位置找不到，致使生成的html文件內容不是指望的內容。
二、爲template指定的模板文件沒有指定任何loader的話，默認使用ejs-loader。如template: './index.html'，若沒有爲.html指定任何loader就使用ejs-loadercanvas
templateContent: string|function，能夠指定模板的內容，不能與template共存。配置值爲function時，能夠直接返回html字符串，也能夠異步調用返回html字符串。
inject：向template或者templateContent中注入全部靜態資源，不一樣的配置值注入的位置不經相同。

一、true或者body：全部JavaScript資源插入到body元素的底部
二、head: 全部JavaScript資源插入到head元素中
三、false：全部靜態資源css和JavaScript都不會注入到模板文件中
favicon: 添加特定favicon路徑到輸出的html文檔中，這個同title配置項，須要在模板中動態獲取其路徑值
hash：true|false，是否爲全部注入的靜態資源添加webpack每次編譯產生的惟一hash值，添加hash形式以下所示：
html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
chunks：容許插入到模板中的一些chunk，不配置此項默認會將entry中全部的thunk注入到模板中。在配置多個頁面時，每一個頁面注入的thunk應該是不相同的，須要經過該配置爲不一樣頁面注入不一樣的thunk；
excludeChunks: 這個與chunks配置項正好相反，用來配置不容許注入的thunk。
chunksSortMode: none | auto| function，默認auto；容許指定的thunk在插入到html文檔前進行排序。
>function值能夠指定具體排序規則；auto基於thunk的id進行排序； none就是不排序
xhtml: true|fasle, 默認false；是否渲染link爲自閉合的標籤，true則爲自閉合標籤
cache: true|fasle, 默認true；若是爲true表示在對應的thunk文件修改後就會emit文件
showErrors: true|false，默認true；是否將錯誤信息輸出到html頁面中。這個頗有用，在生成html文件的過程當中有錯誤信息，輸出到頁面就能看到錯誤相關信息便於調試。
minify: {....}|false；傳遞 html-minifier 選項給 minify 輸出，false就是不使用html壓縮。

index.html做爲模板html添加

<!DOCTYPE html>
<html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="Bootstrap Admin App + jQuery">
    <meta name="keywords" content="app, responsive, jquery, bootstrap, dashboard, admin">
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/assets/styles/main.css"/>
    <title>消費金融有限公司</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="/dist/bundle.js?v=<%=htmlWebpackPlugin.options.versionPath%>"></script>
  </body>
</html>

webpack.config.js代碼中添加

var HtmlwebpackPlugin = require('html-webpack-plugin');
function date(){
    let nowDate = new Date();
    let year = nowDate.getFullYear();
    let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1): nowDate.getMonth() + 1;
    let day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
    let hours = nowDate.getHours() < 10 ? "0" + nowDate.getHours() : nowDate.getHours();
    let minutes = nowDate.getMinutes() < 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();
    let seconds = nowDate.getSeconds() < 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds();
    let dateStr = year + '' + month  + day +'_'+ hours +':'+ minutes +':'+ seconds;
    return dateStr;
}

  new HtmlwebpackPlugin({
    filename: 'index.html',
    template: __dirname + '/index.html',
    inject:false,
    versionPath: date()
  }),

相關標籤/搜索

每日一句

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