webpack5 创建多页面应用配置

简单版webpack创建多页面应用,只要把配置文件复制下来,然后npm安装相应插件,正常是能跑起来了

创建

  1. 初始化
    npm init生成package.json文件
  2. 安装webpack
    npm i -D webpack webpack-cli webpack-dev-server
  3. 创建main.js入口文件和webpack.config.js文件
  4. 安装html-webpack-plugin
    文件打包好之后,我们不可能每次在html文件钟手动引入打包好的js,这时候就需要使用html-webpack-plugin创建html页面,并将打包后的js文件引入到html
  5. scssbootstrap那些按需引入,具体可以直接复制下方的package.json文件,然后直接执行npm i下载相关的插件

配置文件

// webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const resolve = dir => path.resolve(__dirname, dir);
module.exports = {mode: 'development',entry: {	// 入口文件main: path.resolve(__dirname, './src/main.js'),home: path.resolve(__dirname, './src/js/home.js'),aboutus: path.resolve(__dirname, './src/js/aboutus.js')},output: {	// 出口文件path: path.resolve(__dirname, 'dist'),filename: "./js/[name].js",assetModuleFilename: 'img/[hash][ext][query]'},devServer: {hot: true},optimization: {minimizer: [new CssMinimizerPlugin(),],},module: {// webpack 本身只支持处理js, json文件,将其他转换成有效模块rules: [{test: /.html$/,loader: 'html-loader',options: {esModule: false}},{   // 样式test: /\.css$/,use: [MiniCssExtractPlugin.loader,// "style-loader",{loader: 'css-loader',options: {modules: {localIdentName: '[hash:base64:8]',}}}]},{   // 图片test: /\.(png|svg|jpg|jpeg|gif)$/,type: 'asset',generator: {filename: 'image/[name].[contenthash:8][ext][query]'}},{   // scsstest: /\.(scss|sass)$/,use: [MiniCssExtractPlugin.loader,// "style-loader","css-loader",{loader: 'postcss-loader',options: {postcssOptions: {plugins: () => [require('autoprefixer')]}}},'sass-loader'],},],},resolve: {alias: {"@": resolve('src')}},plugins: [new webpack.HotModuleReplacementPlugin(),new HtmlWebpackPlugin({template: path.join(__dirname, './src/pages/index.html'),filename: 'index',chunks: ['index']}),new HtmlWebpackPlugin({template: path.join(__dirname, "./src/pages/home.html"),filename: 'home',chunks: ['home']}),new HtmlWebpackPlugin({template: path.join(__dirname, './src/pages/aboutus.html'),filename: 'aboutus',chunks: ['aboutus']}),new CleanWebpackPlugin(),new MiniCssExtractPlugin({filename: 'css/[name].[fullhash].css'})]
}
// package.json
{"name": "test","version": "1.0.0","description": "","scripts": {"dev": "webpack-dev-server --port 3001 --hot --config webpack.config.js","test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"clean-webpack-plugin": "^4.0.0","css-minimizer-webpack-plugin": "^7.0.0","html-loader": "^5.1.0","html-webpack-plugin": "^5.6.0","mini-css-extract-plugin": "^2.9.0","webpack": "^5.93.0","webpack-cli": "^5.1.4","webpack-dev-server": "^5.0.4"},"dependencies": {"bootstrap": "^5.3.3","css-loader": "^7.1.2","jquery": "^3.7.1","node-sass": "^9.0.0","postcss-loader": "^8.1.1","sass": "^1.77.8","sass-loader": "^14.2.1","style-loader": "^4.0.0"}
}

问题

  1. output配置了一个出口导致报错
    报错提示
    多入口也要多出口,输出的文件也要是多个:
entry: {main: path.resolve(__dirname, './src/main.js'),home: path.resolve(__dirname, './src/js/home.js'),aboutus: path.resolve(__dirname, './src/js/aboutus.js')
},
output: {path: path.resolve(__dirname, 'dist'),filename: "./js/[name].js",			// 正确写法// filename: './js/bundle.js',		// 错误写法assetModuleFilename: 'img/[hash][ext][query]'
},
  1. html-webpack-plugin配置不正确导致页面404
    404页面报错
    除了index.html能正常显示外,其他页面都显示404,一开始以为是路由配置或者入口没设置正确,后面发现filename跟其他不一样就试了一下,没想到真是这里的问题
plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, './src/pages/index.html'),filename: 'index',	// 这里必须跟地址一样。如这里写的是 index.html 的话,链接上必须也要带上.html,即 localhost:3001/index.htmlchunks: ['index']}),
]

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/421531.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Cloud之二 微服务注册

1&#xff1a;Intellij 新建服务 user-service 2&#xff1a;pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"…

当 PLC 遇见 “IT”

IT&OT 深度融合工控人加入PLC工业自动化精英社群 IT & OT integration 当今不断发展的工业自动化世界&#xff0c;在智能、高效和快速的系统和软件应用中&#xff0c;数据扮演着越来越重要的角色。传统的 IT 网络中&#xff0c;提供了丰富多彩的规范和协议&#xff0…

kitti数据深度图转点云坐标计算方法与教程(代码实现)

文章目录 前言一、kitti深度图官网介绍1、官网深度图介绍2、深度图读取官网代码(python)3、深度图解读1、数据格式内容2、深度图加工3、深度图转相机坐标深度二、kitti数据内参P矩阵解读1、P2矩阵举例2、内参矩阵 (3x3)3、特殊平移向量(第4列)4、kitti的bx与by解释三、kitti深…

使用Redis实现记录访问次数(三种方案)

目录 0. 前言1. 使用Filter实现2. 使用AOP实现 1. 导入依赖 2. 写一个切面类&#xff0c;实现统计访问次数。 3. 开启AOP 4. 测试 5. plus版本 (1) 新建一个bean类 (2) 新增一个controller方法 (3) 新增一个循环增强方法 (4) 测试…

Python之Redis操作方法

目录 一. 介绍A. 什么是 Redis&#xff1f;B. Redis 的特点和用途C. Python 操作 Redis 的优势 二. 使用 Redis 客户端库A. 安装 Redis 客户端库B. 导入 Redis 模块C. 创建 Redis 客户端实例 三. 数据操作A. 键值对操作1. 设置键值对2. 获取键值对3. 检查键是否存在4. 删除键5.…

使用切换 JDK 的方式优化部署微服务占用内存过高的问题

使用切换 JDK 的方式优化部署微服务占用内存过高的问题 一、前言二、下载 J9 虚拟机的JDK三、切换 JDK1、上传到服务器2、解压3、修改 JDK 路径4、解决 JDK 没有切换成功的问题 一、前言 前段时间在服务器部署了微服务项目&#xff0c;但即使限制了每个服务的堆&#xff0c;内…

【网络安全】-文件下载漏洞-pikachu

文件操作漏洞包括文件上传漏洞&#xff0c;文件包含漏洞&#xff0c;文件下载漏洞。 文章目录  前言 什么是文件下载漏洞&#xff1f; 1.常见形式&#xff1a; 常见链接形式&#xff1a; 常见参数&#xff1a; 2.利用方式&#xff1a; 3.举例&#xff1a;pikachu不安全的文件…

ABB机械手备份与恢复

ABB机械手备份与恢复 备份恢复系统 备份 ABB机器人数据备份的对象是所有正在系统内存中运行的RAPID程序和系统参数。当机器人系统出现错乱或者重新安装系统以后&#xff0c;可以通过备份快速地把机器人恢复到备份时的状态。 如果导出到U盘需要将U盘插入USB接口&#xff0c;位置…

【思博伦】史上最详细思博伦测试仪使用精讲!图解超赞超详细!!!

承接上文 目录 2.2.9.7 配置TCPFLAG 2.2.9.8 配置分片 2.2.9.9 添加VLAN标签 2.2.9.10 添加MPLS标签 2.2.9.11 添加Vntag标签 2.2.9.12 重新快速新建新的帧内容 ​​​​​​​2.2.10 导入Pcap包 2.2.11 发包配置 2.2.11.1 发包模式配置 ​​​​​​​2.2.11.2 配置…

SpringMVC基于注解使用:国际化

01-国际化介绍 首先在bootstrap下载个页面 下载后把登录页面的代码粘上去 然后再登录页面代码上有些超链接需要再spring-mvc.xml里面配置下&#xff0c;登录页面才能正常显示 配置静态资源 国际化-根据浏览器语言国际化 现在是中文的情况&#xff0c;要改为英文 1.配置下属…

ROS入门教程(八)—— 路径规划导航实战

通过Gazebo仿真和RViz仿真的学习后,本文将通过Gazebo与RViz联合仿真实现机器人在Gazebo仿真环境中运动,通过远距搜索与近距搜索实现机器人路径规划导航。 目录 前言 实现思路 仿真模型 仿真源码 前言 前面的ROS入门教程提供ROS仿真的基础步骤,本文提供了实现思路,仿真…

C#笔记10 Thread类怎么终止(Abort)和阻止(Join)线程

Thread类 C#笔记8 线程是什么&#xff1f;多线程怎么实现和操作&#xff1f;-CSDN博客 C#笔记9 对线程Thread的万字解读 小小多线程直接拿下&#xff01;-CSDN博客 上次说过怎么简单的使用多线程&#xff0c;怎么创建多线程&#xff0c;但是没有具体分析它的终止和释放。 线…

L2线性回归模型

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 鸢尾花数据集的单变量与多变量预测 在这周学习如何使用 机器学习 模型对鸢尾花&#xff08;Iris&#xff09;数据集进行单变量与多变量预测。我们将使用鸢尾花…

学习pyqt5相关知识回顾

1. 模块 1.1 import导入 1) 模块:是一系列功能的集合体,模块名.功能名,就可以使用模块的功能 2) 首次导入模块,就会立即执行模块里面的内容 3) 当前名称空间会产生一个名字module,指向module.py产生的名称空间.我们可以使用module.name/函数名,来调用module.py里面的内容. …

RQ-RAG:提升检索增强生成模型的查询精炼能力

人工智能咨询培训老师叶梓 转载标明出处 大模型在面对未见场景时&#xff0c;往往会产生不准确或虚构的回答&#xff0c;这限制了它们的实用性。为了解决这一问题&#xff0c;香港科技大学、香港理工大学和麻省理工学院的研究团队提出了一种名为RQ-RAG&#xff08;Retrieval-A…

被低估的SQL

SQL是现代数据库管理系统中不可或缺的一部分。尽管它的使用已十分普遍&#xff0c;但在数据处理领域&#xff0c;SQL的某些功能和潜力仍然被许多人低估。接下来&#xff0c;小编将与您一起&#xff0c;探讨SQL的一些被忽视的特性&#xff0c;揭示它在数据管理中的真正实力。 1.…

模拟实现string类: clear函数、流提取(<<)和流插入(>>)运算符重载、>、<、==、<=、>=、!=的运算符重载、赋值运算符(=)重载等的介绍

文章目录 前言一、 clear函数二、流提取(<<)和流插入(>>)运算符重载三、 >、<、、<、>、!的运算符重载四、赋值运算符&#xff08;&#xff09;重载总结 前言 模拟实现string类: clear函数、流提取(<<)和流插入(>>)运算符重载、>、<…

记一次导入dbf文件后数据为空问题的解决方法

前言 省流&#xff1a;这篇文章最终采用的是更换导出文件格式的方法&#xff0c;看到这里觉得方法不适用的小伙伴可以不用浪费几秒钟看完这篇文章哦。 问题描述 作者使用的是Navicat数据库管理工具&#xff0c;然后在将源数据库的数据表导出为dbf格式文件后&#xff0c;再将…

Linux进阶命令-echodatealias

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 经过上一章Linux日志的讲解&#xff0c;我们对Linux系统自带的日志服务已经有了一些了解。我们接下来将讲解一些进阶命令&am…

JAVA中获取类的超类(父类)或接口的class类型

一、前言 这里所说的超类&#xff08;父类&#xff09;或接口&#xff0c;指的就是某个类继承了一个类或实现了N个接口。 比如ArrayList&#xff0c;它继承了一个类&#xff08; java. util. AbstractList<E> &#xff09;&#xff0c;这时候AbstractList就称为ArrayLi…