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

转载于:https://www.cnblogs.com/LChenglong/p/9243641.html