webpack4脚手架搭建2——提取公共代码以及代码分割和懒加载

由于模块化开发中存在模块依赖问题，所以为了减少代码的冗余，提升用户加载速度，我们需要提取公共代码。
webpack 4 移除了 CommonsChunkPlugin，取而代之的是两个新的配置项（optimization.splitChunks 和 optimization.runtimeChunk）

准备工作

我们在src/文件夹下创建app.js，同时引用subPage.js和publicPage.js两个业务模块，而subPage.js和publicPage.js同时引用了lodash（第三方插件）。

app.js

import './assets/js/subPage'
import './assets/js/publicPage'

export default 'mainPage'

subPage.js

import _ from 'lodash'
import './publicPage'
console.log("我是子页面")

export default 'subPage'

publicPage.js

import _ from 'lodash'
console.log("我是公用模块")
export default 'publicPage'

配置webpack

安装lodash cnpm install lodash --save-dev

const path = require('path')
module.exports = {
   
    //module.exports为CommonJS规范
    entry: {
   
    
        app: './src/app'
    },
    output: {
   
   
        path: path.resolve(__dirname, './dist'),
        filename