微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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[\\/]/,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 举报,一经查实,本站将立刻删除。

相关推荐