Where is JavaScript?

Webpack处理资源版本和植入变量

介绍Webpack打包时如何将资源版本和代码版本挂钩

Webpack目前是目前前端最常用的自动化打包工具,其功能就是分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(ScssTypeScript等),并将其转换和打包为合适的格式供浏览器使用。

资源版本

Webpack的三个概念:模块(module)、入口文件(entry)、分块(chunk)。

其中,module指各种资源文件,如 jscss、图片、svgscssless等等,一切资源皆被当做模块。

webpack编译输出的文件包括以下2种:

  • entry:入口,可以是一个或者多个资源合并而成,由html通过script标签引入
  • chunk:被entry所依赖的额外的代码块,同样可以包含一个或者多个文件

下面是一段entryoutput项的配置示例:

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
entry: { app: './src/main.js' }, output: { path: path.resolve(__dirname, '../dist'), publicPath: config[env.prod ? 'build' : 'dev'].publicPath, filename: 'js/[name].js', chunkFilename: 'js/[id].[chunkhash].js' }

其中entry项是入口文件路径映射表,output项是对输出文件路径和名称的配置,占位符如[id]、[chunkhash]、[name]等分别代表编译后的模块 idchunkhashnum值、chunk名等,可以任意组合决定最终输出的资源格式。hashnum的做法,基本上弱化了版本号的概念,版本迭代的时候chunk是否更新只取决于chnuk的内容是否发生变化。

但是前端项目调试过程中版本迭代速度很快,其他项目组成员在调试过程中会关心当前版本对应的change信息,所以可以将Webpack打包后的文件name和 git commit ID绑定起来。

              
  • 1
  • 2
  • 3
var revision = require('child_process') .execSync('git rev-parse HEAD') .toString().trim()

更新输出的filename属性

              
  • 1
filename: 'js/[name].${revision.slice(0, 9)}.js',

这样打包出来的资源名称
https://static.littlewin.wang/blog/30-1.png

植入变量

webpack.DefinePlugin 这个插件用来定义全局变量,在webpack打包的时候会对这些变量做替换。

webpack.DefinePlugin输出对象属性至全局,可以处理字符串和Array

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
new webpack.DefinePlugin({ 'process.env': config[env.prod ? 'build' : 'dev'].env, 'DEV': env.dev, 'PROD': env.prod, '__THEME': '"' + env.platform.theme + '"', 'REVISION': '"' + revision + '"' })

我们可以将之前获取的git commit 版本信息植入到前端执行环境中,在前端入口文件进行调用

              
  • 1
  • 2
console.log(`当前NAP-WEB运行版本 - %c${REVISION}`, 'color:blue') console.log(`http://git.sky-cloud.net:7990/projects/NAP/repos/nap-web/commits/${REVISION}`)

即可以在前端项目console中给出版本信息,并添加指向代码commit的链接
https://static.littlewin.wang/blog/30-2.png

本文于 2017-11-28  发布在  编程  分类下, 当前已被围观 953 次

并被添加「 前端Node.js 」标签

本站使用「 署名 4.0 国际」创作共享协议