（08）webpack生产环境配置html和js

最新推荐文章于 2023-09-07 13:52:03 发布
最新推荐文章于 2023-09-07 13:52:03 发布
阅读量371 收藏
点赞数 1
分类专栏： webpack 文章标签： webpack压缩html webpack压缩js webpack js兼容性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/glorydx/article/details/109351735
版权
本文详细介绍了在webpack生产环境中，如何对JavaScript进行兼容性和压缩处理，以及如何压缩HTML。通过使用babel-loader、@babel/core和@babel/preset-env实现JS的ES6到ES5的转换，确保兼容性；然后利用webpack的mode属性切换到'production'进行JS压缩；最后，借助html-webpack-plugin完成HTML的压缩，确保代码的优化和效率。
摘要由CSDN通过智能技术生成

在webpack生产环境中，对js和html需要有以下基本的处理步骤
对js进行兼容性处理和压缩，对html进行压缩（html无法兼容性处理）

1、js进行兼容性处理

js兼容性处理就是将es6以上版本语法转为es5以下版本语法
需要使用到

babel-loader @babel/core @babel/preset-env

安装
基本js兼容(无法解决promise等)

npm i babel-loader @babel/core @babel/preset-env -D

高级js兼容按需加载（弥补上面的不足）

npm i core-js -D

使用
（1）

了解本专栏 订阅专栏 解锁全文 超级会员免费看
可缺不可滥
关注
专栏目录
订阅专栏
webpack 生产 开发 公共环境下的配置
qq_66349348的博客
11-04 187
webpack 生产 开发 公共环境下的配置
webpack.prod.js
海阔天空
03-18 440
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); let TerserPlugin = require('terser-webpack-plugin'); let {smart} = require('webpack-merge'); //既想要base中的配置 又想要自己的配置 base let base = require('./webpack.base'); module.expor
webpack生产环境-Html压缩
肖帅的博客
03-25 337
webpack生产环境-Html压缩 1，创建文件 2，修改配置文件 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { fil...
html如何自动引入js,html如何引入js
weixin_42299169的博客
06-03 1846
怎么在html文件中调用js文件我想在html中调用js文件.不知道从哪开始.请高手帮忙~~~急。。。。将这一段代码保存到一个文件中。注意，您可以任何文本工具创建js文件，不过您在保存的时候，需要将名字后缀名为.js。这里将js文件保存为index.js。之后如果我们需要使用index.js。我们只需要调用即可，不需要再写新的js文件。html如何调用外部js中得方法我想点击按钮触发外部js中得f...
如何配置webpack生产环境
weixin_41675013的博客
04-29 202
手动创建webpack.prod.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'production', //production entry: path.join(__dirname, 'src', 'i...
如何在HTML网页引入JavaScript
热门推荐
java_dwj的博客
01-12 1万+
方式一: 在HTML网页内,书写script标签,里面定义js代码 缺点: 1.js代码不能重复使用(不能在其他网页里使用) 2.HTML标签和js代码耦合,不便于后期维护修改 优点: 1.HTML网页和js代码写在一起,便于阅读和测试 小结:在开发环境中使用方式一(编写阶段) 方式二: 1.在外部定义一个js文件 2.在HTML网页内,通过script标签的src属性引入外部js文件 注意:引入时注意路径写正确 当前目录:直接写目标完整的文件名 上级目录: . ./目录文件名/目
webpack+typescript环境配置.zip
04-23
接下来，我们将深入探讨如何配置一个基于 Webpack 和 TypeScript 的开发环境，以及如何进行项目结构搭建和打包发布。 1. **安装依赖** 在创建新项目之前，首先确保已安装 Node.js。然后通过 `npm`（Node Package ...
React + webpack 环境配置的方法步骤
08-29
React + Webpack 环境配置方法步骤 React 是一个流行的前端框架，用于构建用户界面，而 Webpack 是一个流行的模块打包工具，用于管理和编译 JavaScript 模块。为了使用 React 和 Webpack 构建一个完整的前端环境，...
如何在html中使用js
最新发布
2203_76032203的博客
09-07 508
2. 编写JavaScript代码：在引入JavaScript的位置，你可以编写任何JavaScript代码。1. 在HTML文件中引入JavaScript代码：你可以在HTML文件的`<head>`或`<body>`标签中使用`<script>`标签来引入JavaScript代码。3. 保存并预览网页：保存HTML文件后，使用Web浏览器（例如Google Chrome、Mozilla Firefox等）打开该文件，以查看JavaScript代码的效果。
webpack配置html模板配置
HWSss的博客
01-10 1156
npm i html-webpack-plugin -D html-webpack-plugin 将js css自动是生成css,js 引用到打包生成的html文件中 可以压缩html文件 引用自定义模板 在webpack.config.js中 const HtmlWebpackPlugin = require('html-webpack-plugin') plugins:[ ...
Webpack：develoment和production模式的打包（10）
黑卡米的专栏
10-22 269
介绍 每次在开发和生产环境都要切换代码会非常麻烦，在webpack里面可以用merge合并同样代码偷懒。 使用 安装代码合并包，-D代表 --save-dev npm install webpack-merge -D 创建webpack.common.js 将development和production共同的代码的抽出来放入webpack.common.js const path = require('path'); const { CleanWebpackPlugin } = require('clean
webpack多个Html,使用webpack构建多页面应用
weixin_42546361的博客
06-19 791
关于webpack的配置和使用，网上已经有许多文章了，大多是在讲单页应用，当我们需要打包多个html时，事情就变得麻烦起来。怎么在webpack-dev-server里使用路由？怎么打包多个html和js chunk并自动更新md5？本文讲的就是如何解决这些问题。这里假设你对Webpack已经有最基础的了解需求来看下我们的需求:使用webpack-dev-server做开发时的服务器在webpac...
webpack(大概讲解)
Liucaicaia的博客
11-22 253
webpack的基本使用
webpack 如何在 html 页面里区分环境变量？
Wonder233的学习博客
03-10 3828
html标签里面: <% if (process.env.NODE_ENV === 'development') { %> <script src="<%= BASE_URL %>libs/vue/vue.js"></script> <script src="<%= BASE_URL %>libs/vue-router/vu...
webpack使用HtmlWebpackPlugin进行cdn配置
Msgyvcici
03-25 4921
CDN服务商的选择 在前面的文章中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如： BootCDN unpkg 其中BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CD...
webpack静态资源地址注入html,HtmlWebpackPlugin
weixin_30586369的博客
06-03 687
说明插件的基本作用就是生成 html 文件。原理很简单：将 webpack 中entry配置的相关入口 chunk 和 extract-text-webpack-plugin抽取的 css 样式插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中...
webpack静态资源地址注入html,webpack4-生成html文件
weixin_30444573的博客
06-04 317
但在真实生产环境中，一次运行webpack后，完整的index.html应该是被自动生成的。例如静态资源、js 脚本都被自动插入了。项目目录目录.png安装html-webpack-plugincnpm i html-webpack-plugin --save-dev其中index.html代码webpack.config.js配置如下plugins:[new HtmlwebpackPlugin(...
webpack生产环境配置：优化缓存与懒加载
通过分析生产环境配置文件webpack.production.js，作者介绍了删除不必要的开发工具，如dev-tools和dev-server，并且提到了css和js代码的优化。文中还引入了extract-text-webpack-plugin和html-webpack-plugin这两个...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可缺不可滥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值