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" 
    ]
}

 

你可能感兴趣的:(vue+webpack配置+多页面入口+提取公共js)