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[\\/]/,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‘,filename:‘bb.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" ] }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。