webpack5使用记录

已于 2023-02-16 15:51:05 修改
阅读量91 收藏
点赞数
分类专栏： webpack 文章标签： javascript webpack 前端
于 2023-02-16 15:43:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579327/article/details/129062315
版权

webpack官方：配置 | webpack 中文文档

此处使用了 webpack-dev-server 热刷新：webpack-dev-server - npm

安装

一次安装：webpack、webpack-cli、webpack-dev-server、html-webpack-plugin

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D

如有问题可分开安装

npm i webpack -D
npm i webpack-cli -D
npm i webpack-dev-server -D
npm i html-webpack-plugin -D

配置

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development', // 开发模式
  entry: path.join(__dirname, './src/main.js'), // 要打包的入口文件
  output: {
    path: path.join(__dirname, './dist'), // 打包后输出到哪个目录
    filename: 'bundle.js', // 输出文件的名称
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'dev-project',
      filename: 'index.html',
      template: './src/index.html',
    }),
  ],
  devServer: {
    port: 9999, // 指定端口
    hot: true, // 热加载
    open: true, // 自动打开
    watchFiles: ['./src/index.html'], // 监听index.html修改时刷新
  },
}

package.json   增加【"dev": "webpack-dev-server"】

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "bundle.js",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

src目录

main.js 文件

console.log('这是入口文件');
alert('编译成功！')

 index.html 文件

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>RUN WEBPACK_DEMO</h1>
  </body>
</html>

示例：目录结构

感谢：webpack5.0使用webpack-dev-server时，无法自动刷新网页html页面解决方案_HConan的博客-CSDN博客_webpackdevserver页面没变

木心操作
关注
专栏目录
升级webpack5的踩坑记录
u011435776的博客
02-15 804
升级webpack5的踩坑记录官方说明文档地址升级方式踩坑记录第一坑：使用html-webpack-plugin插件报错 官方说明 文档地址 地址：https://webpack.js.org/ 中文地址： https://www.webpackjs.com/ 升级方式 npm install --save-dev webpack 踩坑记录 第一坑：使用html-webpack-plugin插件报错 插件版本不符，需要进行升级。 npm uninstall html-webpack-plugin npm
webpack 最好的日志_体验webpack5个人总结
weixin_39977136的博客
01-12 483
介绍webpck5距离webpack5推出也快有一年多的时间，现在还处在测试版本的阶段，目前已经可以安装使用了安装方式```npm install webpack@next webpack-cli -Dyarn add webpack@next webpack-cli -D```复制代码HTML插件兼容HTML需要将html-webpack-plugin升级到4.3.0版本环境要求最新的官方文档要...
webpack5概念学习
zhouzhiling_的博客
02-08 788
webpack概念学习 版本：webpack5
Webpack学习日记---(1)基础入门
m0_56420479的博客
06-09 57
学习webpack时，为了方便自己复习，写了该博客。
webpack基本使用
Baby_加油_的博客
12-30 792
基本打包命令 开发环境指令：webpack ./src/index.js -o ./build/built.js --mode=development ​ webpack以./src/index.js为入口文件开始打包，打包后输出到./build/built.js 生产环境指令：webpack ./src/index.js -o ./build/built.js --mode=production ​ webpack以./src/index.js为入口文件开始打包，打包后输出到./build/built.j
前端工程化第一章：webpack5基础（上）
to_the_Future的博客
07-18 1473
Webpack是一个现代JavaScript应用程序的静态模块打包器。它是一个用于将代码编译成浏览器可识别的格式的工具。webpack代码转换TypeScript编译成JavaScriptSCSSless编译成CSS等。文件优化：压缩JavaScriptCSSHTML代码，压缩合并图片等。代码分割提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。自动刷新：监听本地源代码的变化，自动重新构建。
vue2.6+webpack5+typescript
09-07
2. **Webpack 5**: Webpack 5 是 Webpack 的最新版本，其主要改进包括对二进制数据处理的优化、更好的性能和内存使用，以及默认支持了零配置的TypeScript。配置Webpack时，我们需要定义入口、出口、加载器（如`vue-...
webpack5 文档资料
最新发布
01-02
19. **docs**：这个目录可能包含了 Webpack 5 的文档，包括使用教程、配置参考等，对于学习和理解 Webpack 5 的工作原理非常有用。 总的来说，Webpack 5 提供了一个强大的工具链，用于构建现代 JavaScript 应用程序...
vue-project:Webpack5 +微服务
03-22
Vue.js项目结合Webpack5与微服务的实践是一个现代前端开发的重要话题。在这个项目中，我们将深入探讨如何构建一个基于Vue.js的应用程序，并利用Webpack5的强大功能优化构建过程，同时引入微服务的概念来提升项目的可...
webpack基础使用,实现隔行变色效果
08-04
在本项目中，我们将会探讨如何使用 Webpack 的基本配置来实现一个简单的功能——隔行变色效果，这个功能通常在网页表格中用于提高可读性。 首先，让我们看一下 `webpack.config.js` 文件，这是 Webpack 的核心配置...
5.html-webpack-plugin插件的使用
Ych_cxy的博客
08-23 116
//安装 cnpm i html-webpack-plugin -D //在src下新建一个模板index.html //插件做的事情是在内存中创建一个index.html并引入打包后的js文件 //此时webpack.config.js变成如下 let path = require("path") let hwp = require("html-webpack-plugin") module...
webpack5初始化项目（简单版）
qq_37312180的博客
03-02 822
webpack5初始化项目 3.安装webpack webpack-cli 4.安装html-webpack-plugin 5.安装webpack-dev-server 7.运行webpack
webpack的html-webpack-plugin安装配置无报错，但不生效问题
princess66的博客
11-01 1294
webpack的html-webpack-plugin安装配置无报错，但运行不生效问题
学习笔记 - webpack配置
Ewigkeit_的博客
03-22 1219
webpack webpack概念：是前端工程项目的具体解决方案。 webpack功能： 提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、新跟那个优化等强大的功能。 webpack中的默认约定：webpack 4.x 5.x版本 ① 默认的打包入口文件为 src -> index.js。 ② 默认输出文件路径为 dist -> main.js。 ③ 可以在webpack.config.js中修改约定。 webpack 中的插件： ① webpack-d
webpack学习5，htmlwebpackplugin 插件的使用
天天的博客
03-01 1371
我们的目标就是打包的时候，让它自动生成index.html 也就是在build 目录下生成目标Index.html 好，我们使用html-webpack-plugin 插件来解决这个问题 1， 安装 npm i html-webpack-plugin -D 2, 在配置文件中配置就行了 我们来看下源文件： <!DOCTYPE html> ...
「Webpack5 专题（三）」开发环境的设置
shengjon的博客
11-12 321
一、前言 上一篇讲到如何处理静态资源，本篇将更进一步，介绍如何打造一个基础而不失效率的开发环境。 关键词：HtmlWebpackPlugin、Source Map、Dev Server、Hot Module Replacement。 二、Plugins - 快捷打包 如果说，Loader 的作用是将不同的资源进行转换，那么 Plugin 则是在打包的过程中帮我们做一些事情，使打包过程更好管理。 在之前的打包流程中，实际上存在两个问题。 第一，我们是不可以随意删除输出文件夹（我设置的是 dist）
插件 html-webpack-plugin 的详解
hzxOnlineOk的博客
04-19 600
PS:本篇文章属于转载，原作者是https://segmentfault.com/a/1190000013883242?utm_source=tag-newest 转载目的是为了让自己之后的复习会更方便一些，如有侵权请联系删除，万分感谢 最近在学习webpack，接触到的第一个插件就是html-webpack-plugin,那么今天就来详解一下它的用法吧。 先来上一个例子： var h...
webpack5-[html-webpack-plugin]的使用
SevenSongyun的博客
12-31 2127
webpack5-[html-webpack-plugin]的使用 一、为什么要用 html-webpack-plugin 插件，这个插件有什么用？ html-webpack-plugin 插件可以在内存中生成 html 文件 html-webpack-plugin 插件可以在生成的文件中自动帮我们导入合适的js文件 二、步骤 初始化 npm init -y 安装 npm i webp...
Webpack5中的文件监听与热更新
人生百年几今日，今日不为真可惜。
02-24 2502
文章目录Webpack中的文件监听启动 webpack 命令时，带上--watch参数再配置文件webpack.config.js中设置watch：true文件监听的与原理热更新安装webpack-dev-server配置package.json将webpack.config.js中node改为development引入webpack自带插件'webpack.HotModuleReplacementPlugin'插件配置devServer Webpack中的文件监听 Webpack文件监听是指在开发过程中，
Webpack5入门与loader使用指南
资源摘要信息:"webpack5基础配置" webpack是一个现代JavaScript应用程序的静态模块打包器。它在浏览器端和服务器端应用程序的开发中被广泛使用，通过预编译资源，使得依赖于复杂应用程序的开发变得容易管理。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值