webpack+vue搭建后续，生成html，css文件剥离，清除多余文件

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 extract-text-webpac