webpack打包时自动给js添加后缀名


为了清除浏览器缓存,可以在webpack打包的时候自动添加时间戳或者版本号,这样浏览器就可以加载新资源,清楚万恶的缓存~

在vue中,利用vue-cli打包,会将vue.config.js中的

configureWebpack配置合并到最终的webpack中,配置如下:

// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// vue.config.js
const time=new Date().getTime();
module.exports = {

  configureWebpack: {
    devServer: {

    },
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `js/[name]-[hash].js?time=${time}`,
      chunkFilename: `js/[name]-[hash].js?time=${time}`,
    },
    plugins: [
    //   new BundleAnalyzerPlugin()
    ],
    module: {

    },
    // 外部扩展-从打包的bundle文件中排除依赖
    externals:{
      a:'a'
    },
  },
//会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。 chainWebpack:config=>{} }

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注