webpack插件plugin 添加版权 打包html js压缩
原创webpack插件plugin 添加版权 打包html js压缩
原创
有勇气的牛排
发布于 2023-06-25 23:29:22
发布于 2023-06-25 23:29:22
文章被收录于专栏：有勇气的牛排专栏
@TOC
1 添加版权
webpack.config.js
onst webpack = require('webpack')
module.exports = {
...
plugins: [
new webpack.BannerPlugin('最终版权归AAA所有')
]
}2 打包html
- 目前，我们的index.html文件存放在项目的根目录下
- 真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，name打包的js等文件就没有意义了。
- 所以，我们需要将index.html文件导包放到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件。
- HtmlWebpackPlug插件可以为我们做以下事情
- 自动生成一个index.html文件（可以指定模板来生成）
- 将打包的js文件，自动通过script标签插入到body中。
- 安装
npm install html-webpack-plugin@3.2.0 --save-dev4.使用插件，修改webpack.config.js文件中的plugins部分的内容如下
- 这里的template表示根据什么模板来生成index.html
- 另外，我们需要删除之前在output中添加的publicPath属性
- 否则插入的script标签中的src可能会有问题
plugins: [
new webpack.BannerPlugin('最终版权归AAA所有')
// new HtmlWebpackPlugin()
new HtmlWebpackPlugin({
template: 'index.html'
})
]3 js压缩
npm install uglifyjs-webpack-plugin --save-devconst uglifuJsPlugin = require('uglifujs-webpack-plugin')
plugins: [
new uglifyJsPlugin()
]原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
