webpack初入门（三）--优雅降级和前端静态服务器

最新推荐文章于 2022-09-27 15:02:51 发布
最新推荐文章于 2022-09-27 15:02:51 发布
阅读量332 收藏 1
点赞数
分类专栏： 前端学习之路 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44596422/article/details/105956763
版权

优雅降级指的时将高版本的ES降至低版本

首先需要安装一个转换器 babel-loader 官网

复制官网的安装代码，npm改成cnpm，后面加 -D，或者这样写

$ cnpm install babel-loader@8.0.4 @babel/core @babel/preset-env -D

安装成功后，去配置，即是rules这个数组的对象，
在这里插入图片描述
复制这一块过去，就是一个对象
在这里插入图片描述

如何检测是否成功了呢？

在index.js中写入ES6的语法
在这里插入图片描述

这样后再执行打包命令，执行成功后

然后在打包后的main.js文件中找到fn
在这里插入图片描述

已经进行了优雅降级!

前端静态服务器的配置

平时在测试时用Live server来打开页面，显示的是http://127.0.0.1:5500酱紫的，在项目中会用比如localhost:8080这样的路劲来测试，所以这里我可理解是配置静态服务器就是指使得打开特定的localhost：端口号 就可以打开测试页面
在webpack官网中搜索 webpack-dev-server然后来到 这个页面
找到 webpack-dev-server这块，看下安装教程和使用教程

先进行安装

$ cnpm install webpack-dev-server -D

== 安装成功后进行配置，在webpack.config.dev.js文件中加入同级块==

devServer: {
    contentBase: path.join(__dirname, '../dist'),//当前服务器作用在这个文件夹下,这个杠号忘记了！
    open: true,//自动打开浏览器
    hot: true,//表示热更新【自动刷新】
    port: 8080 //指定服务器开启的端口

}

== 然后在package.json中加入这个两句==

在这里插入图片描述
然后输入

npm run start     回车

然后浏览器自动打开
在这里插入图片描述
哦，我又成功了！
静态服务器可以直接修改自动刷新，不用重复打开，当我在css文件中修改北京颜色后
在这里插入图片描述

然后浏览器就自动更新了↓
在这里插入图片描述
太棒啦！而且不用再重新 npm run dev就可以直接刷新了！真好！

爱码小电驴
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack5-starter-kit-ts:Webpack 5 入门套件 TS
07-24
webpack5-starter-kit-ts 带有 webpack-dev-server 配置（和 Web 组件）的 Webpack 5。 依赖关系 Node v12.16.0（或更高版本） Yarn v1.22（或更高版本）| NPM v6.13.4（或更高版本） 通过 CLI 安装 安装 w5kit-cli npm install -g w5kit-cli 启动 CLI w5kit 选择TypeScript 通过克隆安装 克隆这个仓库 git clone -b typescript https://github.com/king-prawns/webpack5-starter-kit-ts.git [your-app-name] 删除 .git 文件夹并更改其中的详细信息： package.json src/manifest.json 安装依赖 $ cd your
webpack4-cdn-plugin:上传 webpack 资源到 cdn，允许重命名散列资源
05-31
webpack4-cdn-插件 将您的 webpack 生成的资产上传到 CDN，允许重命名/重新哈希。 要求和重要说明 Node 8+ （支持async/await ）是必需的推荐。 此插件尚未在Windows平台上进行测试。 此插件仅支持webpack@4 。 Webpack配置 process.env.NODE_ENV OR options.mode ：此插件仅适用于生产模式。 output.publicPath ：我们只支持/或空字符串（为简单起见）。 optimization.minimize : 如果您的 CDN 提供商可以进行压缩工作，则首选false 。 安装 npm install -D webpack4-cdn-plugin # or yarn add --dev webpack4-cdn-plugin 演示 用法 const WebpackCDNPlug
webpack4-starter-kit：Webpack 4入门套件
01-31
webpack4-starter-kit 具有webpack-dev-server配置（和Web组件）的Webpack 4。 依存关系 节点v12.16.0（或更高版本） 纱线v1.22（或更高版本）| NPM v6.13.4（或更高版本） 通过CLI安装 安装w4kit-cli npm install -g w4kit-cli 启动CLI w4kit 选择Vanilla JS 通过克隆安装 克隆此存储库 git clone https://github.com/king-prawns/webpack4-starter-kit.git [your-app-name] 删除.git文件夹并在以下位置更改详细信息： package.json src/manifest.json 安装依赖 $ cd your-app-name $ yarn 可用任务 # Runs development server (Webpack dev server) $ yarn dev # Build command $ yarn build # Lint with ESLint $ yarn lint
webpack-使用webpack-dev-server.rar
04-12
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载。这里用一个最简单的例子，让大家迅速的了解原理，避免被其他的附加技术干扰。
webpack5-starter-kit：Webpack 5入门套件
02-02
webpack5-starter-kit 具有webpack-dev-server配置（和Web组件）的Webpack 5。 依存关系 节点v12.16.0（或更高版本） 纱线v1.22（或更高版本）| NPM v6.13.4（或更高版本） 通过CLI安装 安装w5kit-cli npm install -g w5kit-cli 启动CLI w5kit 选择Vanilla JS 通过克隆安装 克隆此存储库 git clone https://github.com/king-prawns/webpack-starter-kit.git [your-app-name] 删除.git文件夹并在以下位置更改详细信息： package.json src/manifest.json 安装依赖 $ cd your-app-name $ yarn 可用任务 # Runs development server (Webpack dev server) $ yarn dev # Build command $ yarn build # Lint with ESLint $ yarn lint #
webpack 降级
weixin_44996006的博客
09-05 2356
首先卸载现有的版本 cnpm uninstall webpack -g 安装需要的版本 cnpm install webpack@3.11.0 -g
降低webpack版本, 完全卸载webpack,再重新安装
一勺菠萝丶的博客
05-10 8727
1. 安装 在全局下安装：npm install webpack -g 安装指定版本：npm install webpack@ -g 例如：npm install webpack@3.6.0 -g 如果只是用来练习全局安装就可以了，一开始装了个4.8.7版本的，node也是最新的npm也好着，一打包就出问 题, 查了一下发现原因是webpack版本太高, 以前的打包命令...
webpack打包ES6降级ES5
weixin_33842304的博客
04-10 859
Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。 安装babel实现ES6到ES5 npm install -D babel-core babel-preset-es2015 复制代码安装babel-loader npm install -D babel-loader 复制代码webpack.con...
webpack打包es6降级es5
weixin_45415458的博客
09-21 736
webpack打包es6降级es5配置
webpack-dev-server版本兼容问题导致cnpm run dev出错Cannot find module ‘webpack-cli/bin/config-yargs‘
小怪獸丶的糖的专栏
12-13 943
一开始配置： webpack的版本是5.10.1 webpack-cli版本：4.2.0 webpack-dev-server:3.11.0 执行cnpm run dev时，提示Cannot find module 'webpack-cli/bin/config-yargs’错误，经过百度发现和很可能是webpakc和webpack-dev-server webpack-cli三个之间的版本问题 最终解决办法： 1、卸载webpack5.10.1降级为webpack4.44.2 cnpm uninstall
webpack版本太高
weixin_45228198的博客
10-06 709
卸载后重新安装卸载重新安装 卸载 #卸载全局 npm uninstall -g webpack-cli npm uninstall -g webpack #卸载局部 npm uninstall webpack-cli npm uninstall webpack 重新安装 npm install -g --save-dev webpack@version #不指定版本，默认安装最新 npm install -g --save-dev webpack-cli #查看 webpack -v #若命令不存在，
webpack 45对比
既然青春留不住，还是做个大叔好!
06-21 408
对比搬自：https://github.com/HolyZheng/holyZheng-blog/issues/46 背景 写了一个库，打包用的webpack，然后就做了升级。 升级问题 可能是因为自主优化打包不多，所以只遇到了sourcemap生成的问题，问了别人，没人响应。然后阅读了官网，解决问题，官网才是最好的学习资料。 即：sourceMap: false 提到上一层级修改为devtool:"cheap-module-source-map" 参考官网TerserWebpackPlugin 和 dev
webpack 之 搭建 本地服务器 && 环境
玄鱼殇
05-16 2054
webpack 三
webpack-js压缩-plugin
weixin_44756893的博客
06-30 149
webpack-js压缩-plugin 1.对打包的js文件进行压缩，使用第三方插件uglifyjs-webpack-plugin 指定版本号1.1.1 npm install uglifyjs-webpack[email protected] --save-dev 2.修改config.js文件 添加： （1）const UglifyJsPlugin = require('uglifyjs-webpack-plugin') （2）修改module.exports：（最后一行为新添加） plugins:[
降低webpack版本高度
weixin_55010771的博客
06-07 3468
webpack版本过高，会出现很多问题，因此可以降低版本高度 1.可以直接覆盖原版本，可以输入`cnpm i webpack 需要降低的版本 -g 比如我们要降低到’3.6.0’ 'cnpm i webpack@3.6.0 -g' 2.卸载当前版本，在重新下载需要的版本 卸载命令： 'npm uninstall webpack -g' 如果是局部安装，也可以在文件夹中找到node-modules中webpack模块删除。 安装命令： 'npm install webpack@3.6.0 -g'
解决使用webpack-dev-server打包后，浏览器显示Cannot GET /
qq_55817438的博客
06-11 1911
解决使用webpack-dev-server打包后，浏览器显示Cannot GET /
前端学习——优雅降级与渐进增强（概念）
彩色熊猫家的博客
04-29 499
常用两种策略： 【1】 优雅降级（graceful degradation），一开始就构建站点的完整功能，然后针对浏览器测试和修复。 【2】 渐进增强（progressive enhancement），一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环...
webpack 安装 及 一些坑
weixin_51225684的博客
09-27 2728
2. 删除webpack-dev-server最新版本，降低webpack版本 npm install webpack-dev-server@webpack-3 --save-dev。问题总结：因webpack-dev-server未指定版本，所以安装的是最新版本，因webpack版本是3.x，所以导致webpack版本与webpack-dev-server版本并不匹配，1.操作步骤：首先全局安装npm install -g webpack，再webpack -v查看版本号报错。
webpack安装跑坑
qq_39047764的博客
04-26 182
npm uninstall   react 跑了很久，似乎删除成功了npm uninstall react react-dom    也能跑npm uninstall webpack webpack-dev-server --save-devnpm uninstall jsx-loader --save-dev  都可以跑npm uninstall babel -gnpm uninstall we...
webpack-dev-server降级
最新发布
04-24
我理解您的问题是如何将 webpack-dev-server 降级版本。您可以使用 npm 命令根据您需要的版本来安装 webpack-dev-server，例如： ``` npm install webpack[email protected] --save-dev ``` 这将安装版本为 3.11.2 的 webpack-dev-server。如果您需要降级到其他版本，请将版本号替换为您需要的版本号。请注意，此操作可能会导致一些其他依赖出现问题，因此请先备份您的项目。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值