zoukankan      html  css  js  c++  java
  • webpack配置路径及hash版本号,利用html-webpack-plugin自动生成html模板

    在项目中,因为需要经常更新文件,但是浏览器缓存问题导致js文件不是最新的,所有想办法添加hash值。

    并配置webpack打包文件配置路径:

    配置webpack打包文件路径,及非入口 chunk文件:

    entry: './src/main.js',
      output: {
        path: path.resolve(__dirname, './dist/assets'),     //打包的文件路径
        publicPath: 'assets/',                      //此输出目录对应的公开 URL   需要以 / 结尾
        filename: 'build-[hash].js',                //此选项决定了每个输出 bundle 的名称   使用参数:例:filename: "[name].[hash].[id].bundle.js"
        chunkFilename: '[id].build-[hash].js'       //此选项决定了非入口(non-entry) chunk 文件的名称
      },

    配置  html-webpack-plugin 生成模板文件:

    首先需要下载:cnpm install html-webpack-plugin --save-dev

        引入:const HtmlWebpackPlugin = require('html-webpack-plugin')

        使用:

          

    plugins: [
        new HtmlWebpackPlugin({
          template: 'index.html',
          filename: '../index.html'
        })
      ],

      更多详细用法,可以参看这篇文章:https://segmentfault.com/a/1190000007294861

  • 相关阅读:
    闲记
    网络数据校验随笔(1)
    [转载]各种在线api地址
    WebLogic Server
    接口和抽象类的区别
    PowerBuilder连接数据库
    Entity Framework(实体框架 EF)
    SQL Server附加数据库提示“版本为661,无法打开,支持655版本……”
    实习总结
    此页状态无效,可能已损坏
  • 原文地址:https://www.cnblogs.com/LChenglong/p/9243641.html
Copyright © 2011-2022 走看看