webpack从0单排---day2笔记

最新推荐文章于 2022-07-08 18:13:28 发布
最新推荐文章于 2022-07-08 18:13:28 发布
阅读量88 收藏
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40890095/article/details/100024008
版权

webpack-dev-server使用 (实时预览)

使用这个必须在当前目录有webpack和webpack-cli（webpack4要求）

npm i webpack-dev-server --save-dev

npm i webpack --save-dev

npm i webpack-cli --save-dev

npm script(package.json)


"scripts":{
    "start:dev": "webpack-dev-server"
}

必须修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
<!--原来得./dist/bundle.js修改为bundle.js-->
</body>
</html>

运行 npm run start:dev

打开 http://localhost:8080

核心概念

  • Entry:入口
  • Module: 模块
  • Chunk: 代码块
  • Loader: 模块转换器
  • Plugin: 扩展插件
  • Output: 输出结果
卖水果的陈柳鹏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack——html-webpack-plugin 插件
会飞的小鹿
10-15 3万+
安装插件 html-webpack-plugin插件 这是一个webpack插件，可以简化HTML文件的创建，为您的webpack捆绑服务提供服务。这对于webpack包含文件名中包含哈希值的bundle 来说尤其有用，它会更改每个编译。您可以让插件为您生成HTML文件，使用lodash模板提供您自己的模板或使用您自己的加载器。 在开发时使用插件 npm i -D html-webpack...
webpack 之 webpack5 webpack-dev-server 版本兼容问题
shenjing_Shining的博客
11-11 4322
在写
webpack5之webpack-dev-server（实时重新加载(live reloading）
weixin_43760969的博客
10-16 1万+
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading 安装webpack-dev-server npm install --save-dev webpack-dev-server 特别注意，以下的版本是不兼容的 webpack.config.js 注意，这里添加了devServer字段，用于配置webpack-dev-server const path = require('path'); // 引入html-webp
安装webpack4.0与webpack-cli的详解
热门推荐
奔跑的面条博客
07-10 3万+
安装webpack真的不难，甚至很简单，大家要有信心 一、首先最好去安装最新版的node.js，windows平台需要去官网下载最新的安装包去安装，命令是没有软用的。 二、本地安装 打开要操作的项目目录的终端，可以直接进入该文件夹的目录，然后将目录改成cmd直接进入该目录的cmd控制面板 也可以使用编译器进入 三、初始化项目 输入npm init -y初始化项目，-y可以让你省略去不停的...
webpack\webpack-cli\webpack-dev-server的配置使用
QB哥欢迎您
07-08 2678
webpack5一路踩坑
webpack-使用webpack-dev-server.rar
04-12
`webpack-dev-server` 是 Webpack 提供的一个本地开发服务器，它极大地提高了前端开发效率，因为它提供了实时重载（live reloading）和热模块替换（hot module replacement）等功能。 **实时重载（Live Reloading）...
笔记-webpack5学习指南-V1.0
08-29
笔记-webpack5学习指南-V1.0
webpack-upload-plugin:Webpack插件
05-13
webpack-upload-plugin介绍这是的插件。...环境要求节点> = 10.5.0安装npm i -D webpack-upload-plugin注意该插件不提供上传至CDN的服务。 实际上，它实际上取决于这种服务。... 对于webpack @ 2，请使用webpack-upl
webpack-使用webpack-dev-middleware.rar
04-12
2. **安装**：首先，你需要在项目中安装 `webpack` 和 `webpack-dev-middleware`。通过 npm 或 yarn 进行安装： ``` npm install webpack webpack-dev-middleware --save-dev 或 yarn add webpack webpack-dev-...
webpack4-cdn-plugin:上传 webpack 资源到 cdn，允许重命名散列资源
05-31
webpack4-cdn-插件 将您的 webpack 生成的资产上传到 CDN，允许重命名/重新哈希。 要求和重要说明 Node 8+ （支持async/await ）是必需的推荐。 此插件尚未在Windows平台上进行测试。 此插件仅支持webpack@4 。 ...
接上一篇文章，数据字典学习经验基础知识分享
07-09
关于自我学习软件工程数据字典基础知识必备干货分享
convnext-tiny-22k-224.pth模型文件
07-09
convnext-tiny-22k-224.pth模型文件
蓝桥杯介绍、心得、往年试题及相关练习
07-09
项目总结 本文详细介绍了蓝桥杯全国软件和信息技术专业人才大赛，包括其背景、参赛心得、往年试题及相关练习。通过学习和练习这些内容，参赛者可以提高自己的算法和编程能力，为蓝桥杯比赛做好充分准备。 蓝桥杯不仅是一个展示编程和算法能力的平台，也是一个提升综合素质和应对挑战的机会。通过参与比赛，参赛者可以积累宝贵的经验，与其他优秀选手交流学习，不断提高自身水平。希望本文能为准备参加蓝桥杯的选手提供有价值的参考，助力他们在比赛中取得优异成绩。
智能台灯智能台灯智能台灯智能台灯智能台灯
07-09
智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯
食品、食品添加剂、食品相关产品采购台账记录制度.docx
07-09
食品、食品添加剂、食品相关产品采购台账记录制度.docx
GitHub入门：开启代码托管与协作之旅
07-09
GitHub是一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。GitHub提供了分布式版本控制和源代码管理（SCM）功能，此外还有一些特色功能，例如允许用户对项目进行跟踪/协调/管理/文档化/信息共享/允许团队成员之间进行交流。 GitHub的基本功能是免费的，它提供了付费账户，拥有更多的私有仓库和一些高级功能。GitHub上的项目通常被称为“repository”（仓库），你可以在仓库中找到项目的源代码、文档、issue跟踪系统、Wiki页面以及项目的社区讨论。 GitHub的主要特点包括： - **版本控制**：使用Git进行版本控制，帮助开发者管理代码变更。 - **协作**：支持多人协作开发，通过分支（branch）、合并请求（pull request）和代码审查（code review）等功能。 - **社区**：数百万开发者和公司使用GitHub分享代码、启动项目和构建软件。 - **开源**：大量开源项目托管在GitHub上，任何人都可以访问和贡献。 - **文档**：使用Markdown格式编写README和其
述职报告（76）PPT模板.pptx
07-09
述职报告（76）PPT模板.pptx
关于电气CAD对于初学者的介绍和相关资料
最新发布
07-09
关于电气CAD对于初学者的介绍和相关资料
深视智能3D相机配置软件EdgeImaging
07-09
EdgeImaging最新软件，适用于深视智能三维相机 常见问题如下： 触发方式： 连续触发、IO触发、编码器触发 最大速度计算公式： 最大速度 = 细化点数 * 采样频率 * 0.8 * 脉冲当量 扫描长度计算公式： 扫描长度 = 细化点数 * 批处理点数 * 脉冲当量 脉冲当量一般情况下为0.001mm 批处理点数不变的情况下，如何提高扫描速度？ 压缩景深，可以提高采样频率 压缩景深z轴范围变小，需要看样品高度是否支持压缩景深，如果样品扫描不全就不能压缩
webpack webpack-cli webpack-dev-server配置
08-16
对于Webpack的配置，你需要安装一些必要的依赖包。首先，确保你已经安装了Node.js和npm。然后，可以通过以下步骤来配置Webpack： 1. 创建一个新的项目文件夹，并在终端中导航到该文件夹中。 2. 初始化一个新的npm项目，运行以下命令并按照提示进行配置： ``` npm init ``` 3. 安装Webpack及其相关依赖： ``` npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, devServer: { contentBase: './dist', }, }; ``` 上述配置指定了入口文件为`src/index.js`，输出文件为`dist/bundle.js`，并启用了开发服务器。 5. 在`package.json`文件中添加以下脚本命令： ```json "scripts": { "start": "webpack serve --open", "build": "webpack" } ``` 上述配置允许你使用`npm start`命令来启动开发服务器，并使用`npm run build`命令来构建生产环境的打包文件。 至此，你的Webpack配置已经完成。你可以根据自己的需求进行进一步的配置，例如添加其他加载器和插件等。记得在项目中创建`src/index.js`作为入口文件，并在其中编写你的应用代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值