webpack打包版本号定义（webpack打包添加版本号）

25-02-17 15

本篇文章给大家谈谈webpack打包版本号定义，以及webpack打包添加版本号的知识点，同时本文还将给你拓展00-认识webpack-为什么要模块化-webpack打包过程、vue-cli+webp

本篇文章给大家谈谈webpack打包版本号定义，以及webpack打包添加版本号的知识点，同时本文还将给你拓展00-认识webpack - 为什么要模块化 -webpack打包过程、vue-cli+webpack处理静态资源及webpack打包步骤详解、vue-cli与webpack处理静态资源的方法及webpack打包使用步奏详解、vue-cli与webpack处理静态资源的方法及webpack打包的坑等相关知识，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

webpack打包版本号定义（webpack打包添加版本号）
00-认识webpack - 为什么要模块化 -webpack打包过程
vue-cli+webpack处理静态资源及webpack打包步骤详解
vue-cli与webpack处理静态资源的方法及webpack打包使用步奏详解
vue-cli与webpack处理静态资源的方法及webpack打包的坑

webpack打包版本号定义（webpack打包添加版本号）

首先版本号的定义是为了解决缓存的问题

在编译的时候webpack提供了

插件html-webpack-plugin，

本文以时间作为版本号

<!DOCTYPE html>
<html>
  <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配置项

插件提供的配置项比较多，通过源码可以看出具体的配置项如下：

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''）

关于filename补充两点：

1、filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的。
2、指定生成的html文件内容中的link和script路径是相对于生成目录下的，写路径的时候请写生成目录下的相对路径。
template: 本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)，如比如 handlebars!src/index.hbs；

关于template补充几点：

1、template配置项在html文件使用file-loader时，其所指定的位置找不到，导致生成的html文件内容不是期望的内容。
2、为template指定的模板文件没有指定任何loader的话，默认使用ejs-loader。如template: ''./index.html''，若没有为.html指定任何loader就使用ejs-loader
templateContent: string|function，可以指定模板的内容，不能与template共存。配置值为function时，可以直接返回html字符串，也可以异步调用返回html字符串。
inject：向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。

1、true或者body：所有JavaScript资源插入到body元素的底部
2、head: 所有JavaScript资源插入到head元素中
3、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>
  <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()
  }),

00-认识webpack - 为什么要模块化 -webpack打包过程

webpack在不进行任何配置的情况下，他只认识js。

为什么要打包？

因为一个个小文件，我们合成一个，这样请求就只请求一次。

webpack除了打包之外，还具有翻译官的功能？

loader把浏览器看不懂的代码翻译成浏览器看的懂的代码。

Plugin？

对文件做点别的事情

不管是loader 还是 plugin 都是可插拔，意思就是你什么时候想用，你就装进来，不想用，删掉。所以说webpack不仅强大，而且灵活。

为什么要模块化？模块化的好处？

如上图，传统的一个页面去引入不同的js就是如上一个个去引入，但是这样会有命名冲突的问题，A.js 和B.js中可能有相同的变量命名。

解决方法：

在A.js中和B.js 中加上命名空间。

命名空间会造成一些问题：

如上图，把这个autoLogin命名空间的模块暴露出去了，其实暴露的只是想让login 给别人用，但是全部都给别人了，如果别人误操作去 autoLogin.username = '张三', 不小心把username给改掉了，那么可能你login方法里去做的登录名和密码就永远也不符合了，这不符合开闭原则。

所以，单纯使用命名空间只是为了起到被覆盖，冲突的作用，但是并不能保证随意的访问和篡改，那么如何做呢？

我们用函数作用域，函数的闭包机制，保护里面的变量不被污染。也叫作模块作用域：暴露该暴露的，隐藏该隐藏的。

如上图：这样利用闭包就保护了私有变量，又能只暴露我想暴露出去的这个方法。这样外面再去 :

就拿不到里面的变量了。就不会被人篡改了。这就是所谓的开闭原则

改写一个比较标准的模块化写法：

上面的为什么要用一个对象包裹一下tell方法？不能直接赋值给susanModule吗？

如图以上对比：就是给susanModule 让其为一个对象，对象是叫做tell,tell是个与value同名的key，以后调用的时候就是 susanModule.tell()

综上：我们就可以得到模块化的优点：

1.作用域的封装：模块内部的实现不会暴露在危险的全局作用域中，上面就是通过暴露tell接口，供外面使用。

2.重用性：如上面的，只需要执行susanModule.tell 就可以拿到这个方法

3.解除耦合：如果把代码全部扔在一个文件中，出现BUG排查起来很难找，这样模块化后就容易找到定位到错误的模块。

webpack打包原理和过程：

1.把你写的模块(js文件)中的每个逻辑代码块当做webpack一个自执行函数的入参（入参是一个数组，你写的这些代码逻辑块都会装到这个数组中）

第一步：

第二步：把模块包装起来放入自执行函数中的数组（数组都是模块的入参）

第三步：实现模块加载的方法，并把它放到模块执行的环境中，确保模块间可以相互调用。

1.首选去检查，你现在塞给我的这个模块啊我是不是已经加载过了，我去已加载模块的对象中去查这个id，发现已经加载过了，就不进行二次加载了，就直接把加载过的这个结果给你返回过来。

2.如果这个模块没有加载过，那我把其存到那个已加载的对象中，存的时候添加一个moduleId属性，就是给其做个记录

3.接着我就把他的this指到module.exports的导出结果上去，并且去执行已经包装好的模块逻辑。这一步就是让模块逻辑进行执行

4.最后把模块的返回值给return 出去。

第四步：把执行入口文件的逻辑放在一个函数表达式中，并立即执行这个函数（只的就是下面的这个外层的自执行函数）

vue-cli+webpack处理静态资源及webpack打包步骤详解

这次给大家带来vue-cli+webpack处理静态资源及webpack打包步骤详解，vue-cli+webpack处理静态资源及webpack打包的注意事项有哪些，下面就是实战案例，一起来看一下。

通过Vue-cli进行webpack打包的坑

Vue-cli为Vue项目搭建的脚手架的确很方便，但打包时容易出现空白页，或者对应的静态资源加载不了。

我是通过将项目/config下的index.js的assetsPublicPath变成''./''，变成相对路径，进行解决。

cd vue demo 
 npm run dev //运行程序 
npm run bulid //webpack打包

登录后复制

处理静态资源

你也许会注意到vue-cli与webpack结合的项目中，我们通常会有两个静态资源的路径：src/assets和static/，他们两者的区别是什么呢？本文主要和大家介绍了vue-cli与webpack结合如何处理静态资源，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

打包的资源

为了回答这个问题，我们首先要明白Webpack是如何处理静态资源的。在*.vue组件里，所有的templates和CSS模块都被vue-html-loader和css-loader解析来查找路径URL。

举个例子，在 vue-cli+webpack处理静态资源及webpack打包步骤详解和背景background: url(./logo.png)，”./logo.png”是一个相对路径，会被Webpack当做一个依赖加载。

但是因为logo.png并不是JavaScript，所以如果被当成一个依赖的花，我们需要通过url-loader和file-loader来解析它。这个模板已经为你配置了相应的loader，所以你通常不用担心相对路径的部署问题。

即使这些资源有可能在构建过程中被内联/拷贝/重命名，他们也是源码重要组成部分。这就是为什么我们建议单独在/src文件夹里放置静态资源，如同其他的资源文件夹。

事实上，你都不必把他们全放在/src/assets，你可以根据模块/组件来组织利用他们。比如说，你可以把任一组件放到他们自己的目录，并在该目录下存放静态资源。

资源引入规则

相对路径，比如 ./assets/logo.png会被解析成模块依赖。它们会被一个基于你Webpack输出配置的自动生成URL替代。

没有前缀的路径，比如assets/logo.png，同相对路径，转义成./assets/logo.png

有~前缀的路径。 ~被认为是一个模块请求，同require(''some-module/image.png'')。根路径，比如/assets/log.png

在JavaScript得到资源路径

computed: {
 background () {
 return require(''./bgs/'' + this.id + ''.jpg'')
 }
}

登录后复制

这个资源路径同样会被file-loader处理然后返回处理后的路径。而且Webpack会一次性加载该bgs目录下的所有图片。

“真实的”静态资源

与此相对的，static/中的文件全都不会被Webpack处理。它们将被直接拷贝到目标文件夹，引用这些文件需要使用绝对路径。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

通过Vue-cli进行webpack打包的坑

Vue-cli为Vue项目搭建的脚手架的确很方便，但打包时容易出现空白页，或者对应的静态资源加载不了。

我是通过将项目/config下的index.js的assetsPublicPath变成'./'，变成相对路径，进行解决。

rush:js;"> cd vue demo npm run dev //运行程序 npm run bulid //webpack打包

处理静态资源

打包的资源

为了回答这个问题，我们首先要明白Webpack是如何处理静态资源的。在*.vue组件里，所有的templates和CSS模块都被vue-html-loader和css-loader解析来查找路径URL。

举个例子，在和背景background: url(./logo.png)，”./logo.png”是一个相对路径，会被Webpack当做一个依赖加载。


但是因为logo.png并不是JavaScript，所以如果被当成一个依赖的花，我们需要通过url-loader和file-loader来解析它。这个模板已经为你配置了相应的loader，所以你通常不用担心相对路径的部署问题。
即使这些资源有可能在构建过程中被内联/拷贝/重命名，他们也是源码重要组成部分。这就是为什么我们建议单独在/src文件夹里放置静态资源，如同其他的资源文件夹。
事实上，你都不必把他们全放在/src/assets，你可以根据模块/组件来组织利用他们。比如说，你可以把任一组件放到他们自己的目录，并在该目录下存放静态资源。
资源引入规则

相对路径，比如 ./assets/logo.png会被解析成模块依赖。它们会被一个基于你Webpack输出配置的自动生成URL替代。
没有前缀的路径，比如assets/logo.png，同相对路径，转义成./assets/logo.png
有~前缀的路径。 ~被认为是一个模块请求，同require('some-module/image.png')。根路径，比如/assets/log.png
在JavaScript得到资源路径

rush:js;">
computed: {
 background () {
 return require('./bgs/' + this.id + '.jpg')
 }
}


这个资源路径同样会被file-loader处理然后返回处理后的路径。而且Webpack会一次性加载该bgs目录下的所有图片。
“真实的”静态资源

与此相对的，static/中的文件全都不会被Webpack处理。它们将被直接拷贝到目标文件夹，引用这些文件需要使用绝对路径。
总结

以上所述是小编给大家介绍的vue-cli与webpack处理静态资源的方法及webpack打包的坑。小编 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得小编不错，可分享给好友！感谢支持。
关于webpack打包版本号定义和webpack打包添加版本号的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于00-认识webpack - 为什么要模块化 -webpack打包过程、vue-cli+webpack处理静态资源及webpack打包步骤详解、vue-cli与webpack处理静态资源的方法及webpack打包使用步奏详解、vue-cli与webpack处理静态资源的方法及webpack打包的坑的相关信息，请在本站寻找。
		

	
本文标签：

 
 webpack打包
 
 版本号定义
 
 添加版本号
 
 优化SEO