1、安裝html-webpack-plugin

cnpm install --save-dev html-webpack-plugin

將原來的index.html改成index.tmpl.html，並移除裡面的script標籤。

webpack.config.js引入並配置

const htmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.tmpl.html',
			minify: {
				removeAttributeQuotes: true // 移除屬性的引號
			}
        })
    ]
 

執行webpack --mode development,dits目錄下就生成了編譯好的index.html檔案。

順便output選項在原來基礎上加上hash或chunkhash，推薦chunkhash，用來清快取

output: {
    path: __dirname + "/dist",//打包後的檔案存放的地方
    filename: "bundle-[chunkhash].js",//打包後輸出檔案的檔名
	publicPath: 'dist/'
  },

2、安裝extract-text-webpack-plugin

cnpm install [email protected]
 

因為與webpack4的相容性問題，後面得加上@next，或者推薦使用mini-css-extract-plugin，但沒有找到從vue檔案剝離css的配置，暫時還使用老的外掛

針對vue檔案進行配置

const ExtractTextPlugin = require('extract-text-webpack-plugin');

          {
   				test: /\.vue$/, 
				loader: 'vue-loader',
				options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: ['css-loader'],
                            fallback: 'vue-style-loader' 
                        })
                    }
				}	
			}

new ExtractTextPlugin('[name]-[chunkhash].css')
 

執行webpack --mode development,dits目錄下就生成了剝離出來的css檔案

3、使用了hash，每次編譯都會生成不同的檔案，為了刪除多餘的檔案，引入clean-webpack-plugin外掛

cnpm install --save-dev clean-webpack-plugin

const CleanWebpackPlugin = require("clean-webpack-plugin");

new CleanWebpackPlugin('dist/*.*', {
			root: __dirname,
			verbose: true,
			dry: false
		})

執行webpack --mode development,dits目錄下之前生成的檔案已刪除，只保留當前版本的檔案