npm initnpm 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"
]
}
转载于:https://www.cnblogs.com/qiaoli3484/p/11550238.html
相关资源：JAVA上百实例源码以及开源项目
