Webpack 中使用Jquery Vue并分开打包

生成一个Vendor和一个 bundle。

Webpack.config.js文件里面需要配置：

• entry.vendor 需要打包的模块
• plugins 添加webpack的全局插件
• optimization 代替commonsChunkPlugin
• resolve 里面添加vue编译文件的别名，点此查看官方文档

const webpack=require('webpack');
const path=require('path');
module.exports={
    mode: 'development',
    entry:{
        'bundle': path.resolve(__dirname,'src/index.js'),
        vendor: ['jquery','vue']
    },
    output:{
        filename: '[name].js',
        path: path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {test:/\.css$/, use: 'style-loader!css-loader'}
        ],
    },
  
    plugins:[
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new webpack.ProvidePlugin({
            Vue:'vue'
        })
    ],
    optimization:{
        splitChunks:{
            cacheGroups:{
                commons:{
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks:'all'
                }
            }
            
        }
    },
    devServer:{
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    },
    resolve:{
        alias:{
            'vue$':'vue/dist/vue.common.js'
        }
    }
}

index.js入口文件

import jquery from 'jquery';
import vue from 'vue';
window.jQuery=jquery;
window.$=jquery;
window.Vue=vue;