分享web开发知识

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

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

webpack多页面配置

发布时间:2023-09-06 02:23责任编辑:赖小花关键词:配置webpack
const path = require(‘path‘);
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
?entry: {
???‘index/index‘: ‘./src/index/index.js‘,
???‘login/login‘: ‘./src/login/login.js‘, ?
?},
?output: {
???filename: ‘[name].[chunkHash:8].js‘,
???path: path.resolve(__dirname, ‘dist‘),
 
?},

???plugins: [
???????new CleanWebpackPlugin([‘dist‘]),
???????new HtmlWebpackPlugin({
 
???????????filename: ‘index/index.html‘,
???????????chunks: [‘common/utils‘, ‘common/vendor‘, ‘index/index‘]
???????}),
 
???????new HtmlWebpackPlugin({
 
???????????filename: ‘login/login.html‘,
???????????chunks: [‘common/utils‘, ‘common/vendor‘, ‘login/login‘]
???????})
???],

???optimization: {
???????splitChunks: {
???????????cacheGroups: {
???????????????vendor: { ??// 抽离第三方插件
???????????????????test: /node_modules/, ??// 指定是node_modules下的第三方包
???????????????????chunks: ‘initial‘,
???????????????????name: ‘common/vendor‘, ?// 打包后的文件名,任意命名 ???
???????????????????// 设置优先级,防止和自定义的公共代码提取时被覆盖,不进行打包
???????????????????priority: 10 ???
???????????????},
???????????????utils: { // 抽离自己写的公共代码,utils这个名字可以随意起
???????????????????chunks: ‘initial‘,
???????????????????name: ‘common/utils‘, ?// 任意命名
???????????????????minSize: 0 ???// 只要超出0字节就生成一个新包
???????????????}
???????????}
???????}
???},

 
};

webpack多页面配置

原文地址:https://www.cnblogs.com/siso/p/9983796.html

知识推荐

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