分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

The way of Webpack learning (II.) -- Extract common code(多页面提取公共代码)

发布时间:2023-09-06 02:14责任编辑:傅花花关键词:Web

学习之路基于webpack3.10.0,webpack4.0之后更新。

多页面提取公共代码!!!

一:文件关系

pageA --> subA、subB --> moduleA

pageB --> subA、subB --> moduleA

那么pageA、pageB 的公共代码就是subA、subB 、moduleA。

二:webpack.config.js文件配置

var webpack = require(‘webpack‘)var path = require(‘path‘);module.exports = { ???entry:{ ???????"pageA":‘./src/pageA.js‘, ???????"pageB":‘./src/pageB.js‘, ???????‘vendor‘:[‘lodash‘]//第三方插件 ???}, ???output:{ ???????path:path.resolve(__dirname,‘./dist‘), ???????filename:‘[name].bundle.js‘, ???????chunkFilename:‘[name].chunk.js‘ ???}, ???plugins:[ ???????new webpack.optimize.CommonsChunkPlugin({//打包业务逻辑上面的公共代码 ???????????name:‘common‘, ???????????minChunks:2, ???????????chunks:[‘pageA‘,‘pageB‘] ???????}), ???????new webpack.optimize.CommonsChunkPlugin({//打包第三方插件lodash的代码 ???????????name:‘vendor‘, ???????????minChunks:Infinity ???????}), ???????new webpack.optimize.CommonsChunkPlugin({//打包webpack代码 ???????????name:‘manifest‘, ???????????minChunks:Infinity ???????}) ???]}

  打包公共代码只适合多页面应用。

三:webpack4中的打包公共代码

webpack4已经移除了commonchunkPlugin,直接在配置里面写即可。

const webpack = require("webpack");const path = require("path");module.exports = { ???mode:‘development‘, ???// 多页面应用 ???entry: { ???????pageA: "./src/pageA.js", ???????pageB: "./src/pageB.js" ???}, ???output: { ???????path: path.resolve(__dirname, "dist"), ???????filename: "[name].bundle.js", ???????chunkFilename: "[name].chunk.js" ???}, ???optimization: { ???????splitChunks: { ???????????cacheGroups: { ???????????????// 注意: priority属性 ???????????????// 其次: 打包业务中公共代码 ???????????????common: { ???????????????????name: "common", ???????????????????chunks: "all", ???????????????????minSize: 1, ???????????????????priority: 0//优先级 ???????????????}, ???????????????// 首先: 打包node_modules中的文件 ???????????????vendor: { ???????????????????name: "vendor", ???????????????????test: /[\\/]node_modules[\\/]/, ???????????????????chunks: "all", ???????????????????priority: 10 ???????????????} ???????????} ???????} ???}};

  

The way of Webpack learning (II.) -- Extract common code(多页面提取公共代码)

原文地址:https://www.cnblogs.com/weihuan/p/9635768.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved