前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >webpack插件plugin 添加版权 打包html js压缩

webpack插件plugin 添加版权 打包html js压缩

原创
作者头像
有勇气的牛排
发布于 2023-06-25 15:29:22
发布于 2023-06-25 15:29:22
23800
代码可运行
举报
运行总次数:0
代码可运行

@TOC

1 添加版权

webpack.config.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
onst webpack = require('webpack')

module.exports = {
  ...
  plugins: [
    new webpack.BannerPlugin('最终版权归AAA所有')
  ]
}

2 打包html

  1. 目前,我们的index.html文件存放在项目的根目录下
  • 真实发布项目时,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index.html文件,name打包的js等文件就没有意义了。
  • 所以,我们需要将index.html文件导包放到dist文件夹中,这个时候就可以使用HtmlWebpackPlugin插件。
  1. HtmlWebpackPlug插件可以为我们做以下事情
  • 自动生成一个index.html文件(可以指定模板来生成)
  • 将打包的js文件,自动通过script标签插入到body中。
  1. 安装
代码语言:shell
AI代码解释
复制
npm install html-webpack-plugin@3.2.0 --save-dev

4.使用插件,修改webpack.config.js文件中的plugins部分的内容如下

  • 这里的template表示根据什么模板来生成index.html
  • 另外,我们需要删除之前在output中添加的publicPath属性
  • 否则插入的script标签中的src可能会有问题
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
plugins: [
    new webpack.BannerPlugin('最终版权归AAA所有')
    // new HtmlWebpackPlugin()
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
]

3 js压缩

代码语言:shell
AI代码解释
复制
npm install uglifyjs-webpack-plugin --save-dev
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const uglifuJsPlugin = require('uglifujs-webpack-plugin')

plugins: [
  new uglifyJsPlugin()
]

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
从零开始学VUE之Webpack(JS打包压缩插件的使用)
可以看到JS已经被压缩了,但是存在一个问题,那就是版权声明没有了,还有注释都没有了,应为这就是压缩的一部分,这个和版权插件是冲突的
彼岸舞
2021/06/07
1.5K0
从零开始学VUE之Webpack(JS打包压缩插件的使用)
plugins webpack_webpack实现原理
插件是 webpack 的支柱功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事。
全栈程序员站长
2022/09/19
4780
从零开始学VUE之Webpack(Html打包插件的使用)
看到的错误大概是不能读取属性中的 initialize方法,是一个没有定义的,经过查看源码,发现在最新的版本中确实没有这个方法了,后来看了下老师的版本是3.2.0,我的是5.3.1
彼岸舞
2021/06/07
8640
从零开始学VUE之Webpack(Html打包插件的使用)
Vue学习-Webpack
从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。
花猪
2022/02/17
1.3K0
Vue学习-Webpack
plugin
plugin是插件的意思,通常是用于对某个现有的架构进行扩展。 webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。
名字是乱打的
2021/12/23
7380
plugin
Webpack(三):使用 plugin 以及本地服务器搭建
webpack 自带 BannerPlugin,我们只需要在 webpack.config.js 中配置即可:
Chor
2019/11/07
1.1K0
打包html的plugin
我们知道,在真实发布项目时,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index.html文件,那么打包的js等文件也就没有意义了。
Qwe7
2022/05/29
7420
Webpack学习总结
WebPack : 模块化解决方案(模块打包机),能够分析项目结构,找到JavaScript模块及浏览器不能直接运行的拓展语言(Scss,TypeScript等),转换和打包为合适的格式供浏览器使用。WebPack把项目当做一个整体,通过一个给定的主文件(如:index.js)开始找到项目的所有依赖文件,使用loaders处理,最后打包为一个(或多个)浏览器可识别的JavaScript文件
csxiaoyao
2018/05/11
2.6K0
Webpack学习总结 【原创】
Webpack学习总结 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257 目录导航 Webpack学习总结 1. Webpack 与 Gulp / Grunt 对比 2. 安装 2.1 创建package.json文件 2.2 安装Webpack作为依赖包
CS逍遥剑仙
2018/04/28
2.4K0
webpack 构建脚手架
本文记录 webpack 的安装和使用,并且使用 webpack 搭建 vue 简易脚手架的过程
很酷的站长
2022/12/28
4500
webpack 构建脚手架
WebPack 模块化打包工具(下)
本篇博文的内容根据 入门 Webpack,看这篇就够了 该篇文章总结而来,其代码、模块示例、功能拓展部分均有所删减,若是想了解更多关于 WebPack 的详细内容,敬请参考原文
Nian糕
2018/08/21
1.3K0
WebPack 模块化打包工具(下)
webpack的基础入门
现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法
javascript.shop
2019/09/04
1.5K0
webpack的基础入门
从零开始学VUE之Webpack(搭建本地服务器并分离开发和生产配置)
dev对应的就是我们服务启动的命令,配置完成后我们就可以通过npm run dev来启动了
彼岸舞
2021/06/07
2.5K0
从零开始学VUE之Webpack(搭建本地服务器并分离开发和生产配置)
转 入门Webpack,看这篇就够了
2017年8月13日更新,本文依旧最新的webpack3.5.3将代码部分完全重写,所有代码都在Mac上正常运行过。希望依旧对你学习webpack有帮助。 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终
jojo
2018/05/03
1.7K0
【Webpack】319- Webpack4 入门手册(共 18 章)(上)
最近和部门老大,一起在研究团队【EFT - 前端新手村】的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。
pingan8787
2019/08/20
1.8K0
【Webpack】319- Webpack4 入门手册(共 18 章)(上)
12. Vue搭建本地服务
本地服务可以提高开发效率. webpack不需要每次都打包, 就可以看到修改后的效果. 本地服务器基于node.js搭建, 内部使用二十express框架. 可以实现让浏览器自动刷新的功能.
用户7798898
2021/03/08
9880
12. Vue搭建本地服务
webpack——快速入门【一】
https://github.com/webproblem/learning-article#webpack
思索
2024/08/16
1490
webpack——快速入门【一】
webpack 入门教程
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
老马
2018/08/20
4.1K0
webpack 入门教程
快速了解 前端打包 webpack
webpack 用于编译 JavaScript 模块,是 JavaScript 静态模块的打包工具。从 webpack v4.0.0 开始,可以不用引入一个配置文件。
王念博客
2019/07/25
9180
webpack 配置文件相关解说
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
Krry
2018/09/10
6180
相关推荐
从零开始学VUE之Webpack(JS打包压缩插件的使用)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验