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

npm init
npm i webpack webpack-cli vue vue-loader css-loader style-loader babel-loader babel-core html-webpack-plugin vue-template-compiler -s

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:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
chunks:['aa','commons','vendor'],
template:'template.html',
filename:'aa.html',
hash:true,//为了更好的 cache，可以在文件名后加个 hash

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

},
}),
new HtmlWebpackPlugin({
chunks:['bb','commons','vendor'],
template:'template.html',
filename:'bb.html',
hash:true,//为了更好的 cache，可以在文件名后加个 hash

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

},
}),
new CleanWebpackPlugin()
]
}

npm i babel-plugin-transform-runtime babel-preset-env -s

.babelrc

{
"presets":[
["env",{
"targets":{
"browsers":"last 2 versions"
}
}
]],
"plugins": [
"babel-plugin-transform-runtime"
]
}