vue公用html,vue+webpack配置+多页面入口+提取公共js

const path=require(‘path‘)

const VueLoaderPlugin=require(‘vue-loader/lib/plugin‘)

const HtmlWebpackPlugin=require(‘Html-Webpack-Plugin‘)

const {cleanwebpackPlugin}=require(‘clean-webpack-plugin‘)

module.exports={

entry:{

aa:‘./src/index.js‘,//....多页面入口

},

mode:‘development‘,

output:{

filename:‘[name].[chunkhash].js‘,

path:__dirname+‘/dist‘,

chunkFilename:‘[name].chunk.js‘},

module:{

rules:[

{

test:/\.js$/,

exclude:/node_modules/,

loader:‘babel-loader‘,

},

{

test:/\.vue$/,

loader:‘vue-loader‘},

{

test:/\.css$/,

loader:‘style-loader!css-loader‘},

{

test:/\.(eot|svg|ttf|woff|woff2)$/,

loader:‘file-loader‘}

]

},

resolve:{

alias:{

vue:‘vue/dist/vue.min.js‘,‘@‘:path.resolve(‘src‘)

}

},

optimization: {

splitChunks: {

cacheGroups: {//注意: priority属性

//其次: 打包业务中公共代码

commons: {

name:"commons",

chunks:"all",

minSize:1,

priority:0},//首先: 打包node_modules中的文件

vendor: {

name:"vendor",

test:/[\\/]node_modules[\\/]/,

chunks:"all",

priority:10}

}

}

},

plugins:[newVueLoaderPlugin(),newHtmlWebpackPlugin({

chunks:[‘aa‘,‘commons‘,‘vendor‘],

template:‘template.html‘,

filename:‘aa.html‘,

hash:true,//为了更好的 cache，可以在文件名后加个 hash

minify: {

collapseWhitespace:true, //把生成的 index.html 文件的内容的没用空格去掉，减少空间

},

}),newHtmlWebpackPlugin({

chunks:[‘bb‘,‘commons‘,‘vendor‘],

template:‘template.html‘,

filename:‘bb.html‘,

hash:true,//为了更好的 cache，可以在文件名后加个 hash

minify: {

collapseWhitespace:true, //把生成的 index.html 文件的内容的没用空格去掉，减少空间

},

}),newCleanWebpackPlugin()

]

}