webpack4（三）：全局变量、抽取公共代码

全局变量

我们在页面请求ajax时，经常会区分环境，比如开发环境和正式环境，连的是不同地址。
src/index.js

if(DEV === 'development') {
    
    url = 'http://localhost:8888/user';
} else {
    
    url = '/user'
    
}

console.log(url);

//ajax代码
//......

那么这个DEV全局变量我们如何定义呢？
我们可以用webpack自带的DefinePlugin模块来搞定。

let path = require('path'); //node的path模块
let webpack = require('webpack');
module.exports = {
    mode:'development',//模式，默认两种 production和development
    entry:'./src/index.js', //入口
    output:{
        filename:'bundle.js', //打包后的文件名，名字随便起
        path: path.resolve(__dirname,'build') // 必须是绝对路径
    },
    plugins:[
        new webpack.DefinePlugin({
            DEV: JSON.stringify("development")
        })
    ]
}

这里需要注意的是，DEV变量后面跟的字符串是作为变量对待的，在打包时会解析这个变量，在声明时需注意。

抽取公共代码

在打包时，经常会遇到的一个问题就是：
如何不重复打包代码？
比如有a.js和b.js两个文件，我在home.js里面import了，然后在other.js里面也import了，那最后a和b会分别打包两次。
这明显不合理，如何只打包一次呢？

let path = require('path');

module.exports = {
    mode: 'development',//模式设置为开发环境的话，不走优化项optimization
    entry: {
        home: './src/home.js', //入口1
        other: './src/other.js', //入口2
    },
    output: {
        filename: '[name].[hash:8].js', //
        path: path.resolve(__dirname, 'build') // 必须是绝对路径
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                common: {
                    chunks: 'initial',
                    minSize: 0,
                    minChunks: 2//只要用过2次以上就抽离
                }
            }
        }
    }
}

只要引用两次以上的文件都会抽离出一个公共的js，然后引用。
不过这样还不行，如果是重复引入库文件呢？

//a.js
import $ from 'jquery';
console.log($);
console.log('我是a文件');
//b.js
import $ from 'jquery';
console.log($);
console.log('我是b文件');

按照之前的做法，就会把我们自己写的公共js和库文件一起打包成一个common文件。
这样就增加了耦合度，我们希望引入的就是干净的库文件，不需带有其他的东西。

let path = require('path');

module.exports = {
    mode: 'development',//模式设置为开发环境的话，不走优化项optimization
    entry: {
        home: './src/home.js', //入口1
        other: './src/other.js', //入口2
    },
    output: {
        filename: '[name].[hash:8].js', //
        path: path.resolve(__dirname, 'build') // 必须是绝对路径
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                common: {
                    chunks: 'initial',
                    minSize: 0,
                    minChunks: 2//只要用过2次以上就抽离
                },

                vendor: {//公共库抽离
                    priority: 1,//加优先级，库文件优先抽离
                    test: /node_modules/,
                    chunks: 'initial',
                    minSize: 0,
                    minChunks: 2,
                }
            }
        }
    }
}

这里需要保证库文件要优先打包抽离，然后再抽我们自己的公共js。