vue + webpack configuration + + multi-page extract public entrance 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 (' the src ' ) 
            } 
        }, 
    Optimization: { 
        splitChunks: { 
            cacheGroups: { 
                // NOTE: priority attribute 
                // Next: Packing business common code 
                Commons: { 
                    name: "Commons" , 
                    of chunks are: "All " ,
                    the minSize: . 1 , 
                    priority: 0  
                }, // First: the packed file node_modules 
                Vendor: { 
                  name: "Vendor" , 
                  Test: / [\\ /] node_modules [\\ /] / , 
                  of chunks are: "All" , 
                  priority : 10 
                } 
            } 
        } 
    }, 
        plugins: [ 
        new new VueLoaderPlugin (),
         HtmlWebpackPlugin ({ 
            of chunks are: [ 'AA', 'Commons', 'Vendor' ],new
            Template: 'template.html' , 
            filename: 'aa.html' , 
            hash: to true , // for better cache, you can add a hash of the file name 
            Minify: { 
                collapseWhitespace: to true , // the generated index. html file useless spaces contents removed, reducing space 
              }, 
        }), 
        new new HtmlWebpackPlugin ({ 
            of chunks are: [ 'BB', 'Commons',' Vendor ' ], 
            Template: ' template.html ' , 
            filename: ' BB. HTML ' , 
            the hash: to true ,// for better Cache, you can add a hash of the file name 
            Minify: { 
                collapseWhitespace: to true , // the useless space is generated index.html file contents removed, reducing the space 
              }, 
        }), 
        new 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" 
    ]
}

 

Guess you like

Origin www.cnblogs.com/qiaoli3484/p/11550238.html