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()
  }),