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

猜你喜欢

转载自www.cnblogs.com/LChenglong/p/9243641.html