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