webpack筆記（8）打包和抽離第三方類庫

普通引入JQuery

npm 安裝 ：

npm install --save jquery

將jquery引入入口文件.js

import $ from 'jquery';

 

用plugin引入

在webpack.config.js配置

const webpack = require('webpack');

module.exports = {
    plugins:[
        new webpack.ProvidePlugin({
            $:"jquery"
        })
    ]
}

 

抽離Jquery

constc  webpack = require('webpack');
module.exports = {
    entry:{
        jquery:'jquery'
    },
    ,plugins:[
        new webpack.optimize.CommonsChunkPlugin({
            //name對應入口文件中的名字，我們起的是jQuery
            name:['jquery','vue'],
            //把文件打包到哪里，是一個路徑
            filename:"assets/js/[name].js",
            //最小打包的文件模塊數，這里直接寫2就好
            minChunks:2
        })
    ]
}

注：4.x版本后不支持 CommonsChunkPlugin

4.x版本后抽離JS

module.exports = {
    optimization : {
        splitChunks: {
            cacheGroups: {
                //命名不限於jquery
                jquery: {
                    chunks: "initial",
                    name: "jquery",
                    enforce: true
                }
            }
        }
    }
}